精华内容
下载资源
问答
  • elementUI上传图片

    2020-12-09 16:34:36
    关于elementUi的upload组件上传图片的使用 以上传头像为例,最重要的两个属性是action和name action是接口的地址,name是接口给的键名,不需要加冒号,选择图片后自动发请求,不需要自己调用axios发起请求 on-...

    关于elementUi的upload组件上传图片的使用
    action是接口的地址,上传时要想附带参数应该在行内绑定数据,然后在data里定义
    on-success是上传成功的回调,before-upload是上传前的回调

    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • elementUi上传图片

    千次阅读 2018-09-26 18:58:56
    element上传图片 <div> <!-- :headers='{token:token}' --> <el-upload class="upload-demo fl" :action="uploadUrl" accept="jpg jpeg、png、...

    element上传图片

     <div>
         <!-- :headers='{token:token}' -->
          <el-upload class="upload-demo fl" 
                    :action="uploadUrl" accept="jpg jpeg、png、gif" 
                    :before-upload="beforeUpload" :on-success="uploadSuccess" :on-change="change" :on-remove="remove"
                    :name="name"
                    :file-list="fileList" :limit="1">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          </el-upload>
      </div>
    

    js

    <script>
    export default {
      data() {
        return {
          uploadUrl: "ulr/img",
          fileList: [],
          uploadFile:'',
          name:'multipartFile'
        };
      },
      methods: {
       
    
        // 上传成功
        uploadSuccess(response, file, fileList) {
          //上传图片成功的回调
          console.log(response);
          let arr = [];
          // fileList.forEach(item => {
          //   let testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
          //   arr.push(item.response.url);
          // });
          this.uploadFile = arr.join(",");
          this.fileList = fileList;
          // if (fileList.length == 3) {
          //   document.getElementsByClassName("el-upload")[0].style.display = "none";
          // }
        },
        change(files, fileList) {
          //修改图片列表的回调
        },
        beforeUpload(file) {
          for (let i = 0; i < this.fileList.length; i++) {
            if (file.name == this.fileList[i].name) {
              this.$message.error("不能上传相同的文件!");
              return false;
            }
          }
          var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
          const isJPG = testmsg === "jpg";
          const isjpeg = testmsg === "jpeg";
          const ispng = testmsg === "png";
          const isgif = testmsg === "gif";
          const iszip = testmsg === "zip";
          const isLt5M = file.size / 1024 / 1024 < 5;
          const isLt20M = file.size / 1024 / 1024 < 20;
          if (!isJPG && !isjpeg && !ispng && !isgif && !iszip) {
            this.$message.error("上传未见只能是 jpg、jpeg、png、gif,zip 格式!");
            return false;
          }
          // if (isJPG && !isLt5M) {
          //   this.$message.error("上传图片jpg大小不能超过 5MB!");
          // }
          // if (isjpeg && !isLt5M) {
          //   this.$message.error("上传图片jpeg大小不能超过 5MB!");
          // }
          // if (ispng && !isLt5M) {
          //   this.$message.error("上传图片png大小不能超过 5MB!");
          // }
          // if (isgif && !isLt5M) {
          //   this.$message.error("上传图片gif大小不能超过 5MB!");
          // }
          // if (iszip && !isLt20M) {
          //   this.$message.error("上传压缩文件大小不能超过 20MB!");
          // }
        },
        remove(file, fileList) {
          //删除图片的回调
          let arr = [];
          // fileList.forEach(item => {
          //   arr.push(item.response.url);
          // });
          this.fileList = fileList;
          this.uploadFile = arr.join(",");
    
          // if (fileList.length == 3) {
          //   document.getElementsByClassName("el-upload")[0].style.display = "none";
          // } else {
          //   document.getElementsByClassName("el-upload")[0].style.display =
          //     "inline-block";
          // }
        }
      }
    };
    </script>
    

    不建议参考 不是那么完善

    展开全文
  • 手动上传多张图片。后台使用的是java 首先要设置auto-upload属性为false,取消自动上传,multiple属性为true,支持多文件上传,http-request自定义的上传方法。 使用new FormData()创建FormData对象发送至后台 <...

    批量上传图片

    后端使用的是java,前端使用vue+elementui。

    前端部分

    首先要设置组件中auto-upload属性为false,取消自动上传,multiple属性为true,支持多文件上传,http-request自定义的上传方法。
    使用new FormData()创建FormData对象发送至后台

    <template>
    	<el-upload
    		action="/api/file/uploadImgs" //上传地址
    		ref="upload"
    		list-type="picture-card" //设置文件列表样式
    		:on-preview="handlePictureCardPreview" //点击文件列表时
    		:on-success="handSuccess" //上传成功
    		:on-error="handError" //上传失败
    		:limit=3 //最大上传个数
    		:on-exceed="handExceed" //文件超出限制
    		:file-list="fileList" //文件列表
    		:multiple="true" //是否支持多文件上传
    		:http-request="uploadFile" //自定义上传方法
    		:auto-upload="false"> //是否自动上传
    		<i class="el-icon-plus"></i>
    	</el-upload>
    	<el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
        <el-button type="primary" @click="submit">上传</el-button>
    </template>
    
    <script>
    	export default {
    		data() {
    			fileList: [], //存放要上传的图片列表
    			fileData:'',
    		},
    		methods: {
    			// 点击图片
    			handlePictureCardPreview(file) {
    				this.dialogImageUrl = file.url;
    				this.dialogVisible = true;
    			},
    			// 图片上传超过限制
    			handExceed(file, fileList){
    				this.$message.error('最多只能上传三张')
    			},
    			// 图片上传成功
    			handSuccess(response, file, fileList){
    				this.$message.success('图片上传成功!')
    			},
    			// 图片上传失败
    			handError(err, file, fileList){
    				this.$message.error('图片上传失败!')
    			},
    			// 自定义上传
    			uploadFile:function(file){
    				/**
    				*file是文件名后台需要用@RequestParam(value="file")接收
    				*/
    				this.fileData.append('file', file.file);
    			},
    			// 提交到后台
    			submit(){
    				this.fileData = new FormData();
            		this.$refs.upload.submit(); //多文件会多次提交
            		/**
            		*如果提交的时候需要携带其他参数,继续在fileData后面追加数据就行了,如这里传入一个id
            		*后台也需要用@RequestParam(value="id")接收
            		*/
            		this.fileData.append('id',12)
            		this.$axios.post('/api/file/uploadImgs', this.fileData)
    		          .then(res => {
    		            console.log(res)
    		          })
    		          .catch(error => {
    		          	console.log(error)
    		          })
    		}
    	}
    </script>
    
    

    后端部分

    控制层代码

    @PostMapping(value = "/upload")
    public void upload(@RequestParam("files") MultipartFile[] files) {
    	// 调用业务层,这里简写
    	service.upload(files);
    }
    

    业务层

    /**
     * 批量上传
     * @param files 文件数组
     * @return list 文件信息
     */
    List<Map<String, Object>> upload(MultipartFile[] files);
    

    实现层

    @Override
    @Transactional(rollbackFor = Exception.class)
    public List<Map<String, Object>> upload(MultipartFile[] files) {
    	List<Map<String, Object>> list = new ArrayList<>();
        for (MultipartFile multipartFile : files) {
            list.add(create(multipartFile));
        }
        return list;
    }
    
    /**
     * 上传文件
     */
    public Map<String,Object> create(MultipartFile multipartFile) {
    	Map<String,Object> map = new HashMap<>(16);
    	// 检查文件大小
    	FileUtil.checkSize(10L, multipartFile.getSize());
    	// 获取文件后缀名
    	String suffix = FileUtil.getExtensionName(multipartFile.getOriginalFilename());
    	// 获取文件类型
    	String type = FileUtil.getFileType(suffix);
    	// 获取服务器地址(用于拼接地址,前端可直接访问资源,根据实际需要来做)
    	String httpUrl = properties.getPath().getHttpUrl();
    	// 获取文件存储根路径(根据实际业务改动)
    	String filePath =  properties.getPath().getPath();
    	File file = FileUtil.upload(multipartFile, filePath  + type +  File.separator);
    	if(ObjectUtil.isNull(file)){
    		throw new BadRequestException("上传失败");
    	}
    	try {
    		String name = FileUtil.getFileNameNoEx(multipartFile.getOriginalFilename());
    		// 封装一个文件具体信息,用于存入数据库,根据自己的业务需求改动即可
    		LocalStorage localStorage = new LocalStorage(
    				file.getName(),
    				name,
    				suffix,
    				file.getPath(),
    				httpUrl+"/file/"+type+"/"+file.getName(),
    				type,
    				FileUtil.getSize(multipartFile.getSize())
    		);
    		// TODO 保存实体,数据库操作,省略
    		map.put("picture_url","/file/"+type+"/"+file.getName());
    		map.put("picture_full_url",httpUrl+"/file/"+type+"/"+file.getName());
    		return map;
    	}catch (Exception e){
    		FileUtil.del(file);
    		throw e;
    	}
    }
    

    工具类 FileUtil 对hutool的FileUtil进行了扩展

    public class FileUtil extends cn.hutool.core.io.FileUtil {
    	/**
         * 定义GB的计算常量
         */
        private static final int GB = 1024 * 1024 * 1024;
        /**
         * 定义MB的计算常量
         */
        private static final int MB = 1024 * 1024;
        /**
         * 定义KB的计算常量
         */
        private static final int KB = 1024;
    
        /**
         * 格式化小数
         */
        private static final DecimalFormat DF = new DecimalFormat("0.00");
        
    	/**
    	 * 检查文件大小
    	 * @param maxSize 文件最大M
    	 * @param size 上传文件的大小
    	 */
    	public static void checkSize(long maxSize, long size) {
    	    int len = 1024 * 1024;
    	    if (size > (maxSize * len)) {
    	        throw new BadRequestException("文件超出规定大小");
    	    }
    	}
    	
    	/**
    	 * 获取不带扩展名的文件名
    	 */
    	public static String getFileNameNoEx(String filename) {
    	    if ((filename != null) && (filename.length() > 0)) {
    	        int dot = filename.lastIndexOf('.');
    	        if ((dot > -1) && (dot < (filename.length()))) {
    	            return filename.substring(0, dot);
    	        }
    	    }
    	    return filename;
    	}
    	
    	/**
    	 * 获取文件扩展名,不带 .
    	 */
    	public static String getExtensionName(String filename) {
    	    if ((filename != null) && (filename.length() > 0)) {
    	        int dot = filename.lastIndexOf('.');
    	        if ((dot > -1) && (dot < (filename.length() - 1))) {
    	            return filename.substring(dot + 1);
    	        }
    	    }
    	    return filename;
    	}
    	
    	/**
    	 * 文件大小转换
    	 */
    	public static String getSize(long size) {
    	    String resultSize;
    	    if (size / GB >= 1) {
    	        //如果当前Byte的值大于等于1GB
    	        resultSize = DF.format(size / (float) GB) + "GB   ";
    	    } else if (size / MB >= 1) {
    	        //如果当前Byte的值大于等于1MB
    	        resultSize = DF.format(size / (float) MB) + "MB   ";
    	    } else if (size / KB >= 1) {
    	        //如果当前Byte的值大于等于1KB
    	        resultSize = DF.format(size / (float) KB) + "KB   ";
    	    } else {
    	        resultSize = size + "B   ";
    	    }
    	    return resultSize;
    	}
    	
    	/**
    	 * 获取文件类型
    	 */
    	public static String getFileType(String type) {
    	    String documents = "txt doc pdf ppt pps xlsx xls docx";
    	    String music = "mp3 wav wma mpa ram ra aac aif m4a";
    	    String video = "avi mpg mpe mpeg asf wmv mov qt rm mp4 flv m4v webm ogv ogg";
    	    String image = "bmp dib pcp dif wmf gif jpg tif eps psd cdr iff tga pcd mpt png jpeg";
    	    if (image.contains(type)) {
    	    	// 图片
    	        return "image";
    	    } else if (documents.contains(type)) {
    	    	// 文档
    	        return "documents";
    	    } else if (music.contains(type)) {
    	    	// 音乐
    	        return "music";
    	    } else if (video.contains(type)) {
    	    	// 视频
    	        return "video";
    	    } else {
    	    	// 其他
    	        return "其他";
    	    }
    	}
    	
    	/**
    	 * 将文件名解析成文件的上传路径
    	 */
    	public static File upload(MultipartFile file, String filePath) {
    	    Date date = new Date();
    	    SimpleDateFormat format = new SimpleDateFormat("yyyyMMddhhmmssS");
    	    // 获取后缀名
    	    String name = getFileNameNoEx(file.getOriginalFilename());
    	    // 获取文件名
    	    String suffix = getExtensionName(file.getOriginalFilename());
    	    String nowStr = "-" + format.format(date);
    	    try {
    	    	// 拼接文件名
    	        String fileName = name + nowStr + "." + suffix;
    	        // 拼接文件目录
    	        String path = filePath + fileName;
    	        // 可解析正确各种路径
    	        File dest = new File(path).getCanonicalFile();
    	        // 检测是否存在目录
    	        if (!dest.getParentFile().exists()) {
    	            if (!dest.getParentFile().mkdirs()) {
    	                System.out.println("was not successful.");
    	            }
    	        }
    	        // 文件写入
    	        file.transferTo(dest);
    	        return dest;
    	    } catch (Exception e) {
    	        e.printStackTrace();
    	    }
    	    return null;
    	}
    }
    
    展开全文
  • elementui 上传图片转base64 做项目的时候,遇到需要上传图片的需求,虽然已经做好了,但是想想PC端有时候也会遇到(这次是移动端的),所以就想到了用elementui搞一下,但是遇到了一个问题,后台接收图片的是base64...

    elementui 上传图片转base64

    做项目的时候,遇到需要上传图片的需求,虽然已经做好了,但是想想PC端有时候也会遇到(这次是移动端的),所以就想到了用elementui搞一下,但是遇到了一个问题,后台接收图片的是base64的,所以这里需要把图片转成base64再上传,

    1、使用elementui组件的时候,需要再on-change绑定一个方法来接收图片信息,auto-upload(是否立即上传图片)需要设置成false,例子中用的是手动上传

    <el-upload
          class="upload-demo"
          ref="upload"
          action=""
          accept=".jpg,.jpeg,.png,.JPG,.JPEG"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="fileList"
          :auto-upload="false"
          :http-request="handleHttpRequest"
          :before-upload="beforeUpload"
          :on-success="handleAvatarSuccess"
          :on-error="handleAvatarError"
          :on-change="getFile">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
        </el-upload>
    

    2、on-change文件状态改变时,就会调用 getFile(file, fileList) 方法,参数file下会有一个raw属性,file.raw对应的就是文件的内容

    getFile(file, fileList) {
            console.log(file);
            this.getBase64(file.raw).then(res => {
              console.log(res)
            });
          }
    

    3、因为图片转base64需要 FileReader 这个API,但是这个API貌似不能return,所以就用 promise 封装了一下,也有另外一种方法,再data定义一个变量去接收转换成的base64,上代码

    getFile(file, fileList) {
            console.log(file);
            this.getBase64(file.raw).then(res => {
              console.log(res)
            });
          },
          getBase64(file) {
            return new Promise(function(resolve, reject) {
              let reader = new FileReader();
              let imgResult = "";
              reader.readAsDataURL(file);
              reader.onload = function() {
                imgResult = reader.result;
              };
              reader.onerror = function(error) {
                reject(error);
              };
              reader.onloadend = function() {
                resolve(imgResult);
              };
            });
          }
    
    展开全文
  • 上代码 ... 具体参数可以看elementUI官方文档
  • ElementUI上传图片携带token请求头

    千次阅读 2021-03-22 20:03:19
    ElementUI上传图片携带token请求头 使用增删改等请求时,我们经常需要在请求中添加请求头headers以进行用户认证。在ElementUI中,其封装了一个action的必选参数,表示上传的请求(地址)。作为初学者,刚开始我一直...
  • elementui上传图片校验

    2020-08-04 12:42:08
    <i v-else class="el-icon-plus avatar-uploader-icon"/> </el-upload> </div> </el-form-item> //自定义正则 var valiIcon = (rule, value, callback) => { // 图片验证 if (!this....
  • 做MIS端或者APP,上传图片,利用的是饿了么组件库里面的上传文件,为了用户体验度好一点 当达到要求上传图片的上限时隐藏上传按钮,清除图片显示按钮 效果图如下: 首先F12找到上传图片按钮的class名称为 接下来给...
  • onChange里面(添加文件、上传成功和上传失败时都会被调用的那个): this.hideUpload = fileList.length >= this.limitCount; handleRemove里面(删除文件被调用的那个): this.hideUpload = fileList.length ...
  • 2.封装上传图片和删除OSS图片的方法 3.引入上传组件,编写页面代码 总结 前言 vue项目中,使用element-ui的上传组件上传图片到OSS并预览。 一、主要用的有哪些依赖包? 1.element-ui 安装 npm i element-...
  • 本文是Vue ElementUI 上传图片文件 从前端到后端实战整个处理流程 前端vue脚手架项目 后端:SpringBoot SpringCloud JDK1.8
  • 项目中由于后台接口的原因,写了两种上传方式 ...针对这两种方式,记录下,如何压缩上传图片 自动上传时压缩图片 模板代码: <el-upload class="upload-demo marginBom" :action="fileUrl + 'file'" :data="{
  • vue+elementUI上传图片/文件,编辑是回显文件名回显文件名 回显文件名 HTML代码块: <el-form-item label="上传" :label-width="formLabelWidth" prop="file"> <el-upload style="width: 80%;" v-model=...
  • 使用Elementui框架,按需引入update上传组件,按照官网引用即可。 上代码。。。 <template> <el-form-item v-show="blockpuzzle && huoti" label="配置手厅背景图片" label-width="160px" prop=...
  • vue+elementui上传图片

    2019-09-20 16:36:26
    class="avatar-uploader" ... this.$message.error("图片上传格式不正确!") return } if (!isLt2M) { this.$message.error("图片大小不能超过 2MB!") } return isJPG && isLt2M },  
  • ElementUI upload组件:...我们的目的是通过使用ElementUI的 upload 组件上传图片到七牛云 存储对象 上,之后拿到该图片在存储对象上的 url地址 1. ElementUI官方文档示例 <el-upload class="upload-demo...
  • beforeImgUpload (file) { let promise = this.checkImageSize(file) promise.then(() =&gt; {}, () =&gt; { this.rsForm.image = {} this.imageObject = [] }) ...checkImageSize ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,433
精华内容 1,373
关键字:

elementui上传图片