vue element-UI 自定义 Upload 上传

柔情只为你懂 2021-07-27 02:10 575阅读 0赞

前端代码：action为必填，在下面的params中可以获取到，:http-request可以覆盖默认上传方式，调用自定义的上传方法

<el-tab-pane label="证照附件" name="second">
      <el-upload
        class="upload-demo"
        ref="upload"
        action="/files/upload"
        :http-request="myUpload"
        :file-list="fileList"
        :auto-upload="true">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <div slot="tip" class="el-upload__tip">只能上传json文件，且不超过500kb</div>
      </el-upload>
    </el-tab-pane>

vue js代码，放在methods中

myUpload(params) {
      var file = params.file;
      var fileType = file.type;
      var isImage = fileType.indexOf('image') != -1;
      // FormData 对象
      var formFile = new FormData();
      // 文件对象
      formFile.append("pic", params.file);
      if (isImage) {
        request({
          url: params.action, //可以获取到上面action中的url地址
          method: 'post',
          headers: {
            'Content-Type': 'multipart/form-data'
          },
          data: formFile
        }).then(function (response) {
          params.onSuccess('配时文件上传成功')
          console.log(response);
        })
          .catch(function (error) {
            params.onError('配时文件上传失败(' + error.response.status + ')，' + error.response.data);
            console.log(error);
          });
      }
    }

java代码

@Value("${myconfig.profile}")
        private String profile;
        @PostMapping("/upload")
        public AjaxResult fileupload(HttpServletRequest request, MultipartFile pic) throws Exception{
            // 先获取到要上传的文件目录
            String path = profile;
            // 创建File对象，一会向该路径下上传文件
            File filePath = new File(path);
            // 判断路径是否存在，如果不存在，创建该路径
            if(!filePath.exists()) {
                filePath.mkdirs();
            }
            if (null != pic) {
                //原始名称
                String originalFilename = pic.getOriginalFilename();
                //新图片名称
                String newFilename = UUID.randomUUID().toString()+originalFilename.substring(originalFilename.lastIndexOf("."));
                //新图片存储路径
                File file = new File(path+"/"+newFilename);
                //将内存中的数据保存到磁盘
                pic.transferTo(file);
                return AjaxResult.success(file);
            }else {
                return AjaxResult.success();
            }
        }