vue+elementUI ＜el-upload＞上传图片坑！

直接上代码！

<el-upload style="margin-left: 20px"
                     :headers="multipart/form-data"
                     class="avatar-uploader"
                     action="http://localhost:8080/drawing_bed/XXX"
                     :show-file-list="false"
                     :accept="'image/*'"
                     :on-success="handleAvatarSuccess"
                     :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>

首先说一下，这个< el-upload >必须要有的东西

1. headers必须要有在 < el-upload >这个标签里面，这个头是用来标注你文件传输的类型，我这边用到的是 form-data 这个类型
2. action 这个必须要有即使你不用它，把它赋值为空也是可以的
3. accept 属性用来限制文件格式

好，在来看这个标签里面的方法是怎么写的

handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      // alert("sdjfaj")
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },

后台代码，接口用来接收前端传过来的图片

@CrossOrigin//跨域设置 不设置前端会报端口没有设置跨域的错误
    @PostMapping("/drawing_bed/userImgUpload")//用户上传头像使用的接口
    public String userImgUpload(@RequestParam("file") MultipartFile file, HttpServletRequest request) throws IOException {
    uploadPath =”src/main/resources/image/“
    //    使用时间来建立文件夹
    SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy/MM/dd/");	        							String format = simpleDateFormat.format(new Date());
        File folder = new File(uploadPath + format);
        if (!folder.isDirectory()) {
            folder.mkdirs();
        }
        BASE64Encoder base64Encoder =new BASE64Encoder();
        String base64=base64Encoder.encode(file.getBytes());
        System.out.println("imgName "+file.getOriginalFilename());
        // 获取文件名
        String fileName = file.getOriginalFilename();
        System.out.println("上传的文件名为：" + fileName);
        // 对上传的文件重命名，避免文件重名   把图片的后缀拿出来，使用uuid进拼接
        String newName = UUID.randomUUID().toString()+fileName.substring(fileName.lastIndexOf("."),fileName.length());
        BASE64Decoder decoder = new BASE64Decoder();
        //Base64解码为图片
        try {
            byte[] b = decoder.decodeBuffer(base64);
            b = decoder.decodeBuffer(base64);
            for(int i=0;i<b.length;++i)
            {
                if(b[i]<0)
                {
                    //调整异常数据z
                    b[i]+=256;
                }
            }
            //新生成的图片 src/main/resources/image//+yyyy/MM/dd/+UUID.jpg/png
            String imgFilePath =uploadPath+format+newName;//src/main/resources/image
            System.out.println("imgFilePath:"+imgFilePath);
            OutputStream out = new FileOutputStream(imgFilePath);
            out.write(b);
            out.flush();
            out.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
        // 返回上传文件的访问路径
        String filePath = request.getScheme() + "://" + request.getServerName()
                + ":" + request.getServerPort()  +"/"+ format + newName;
        System.out.println(filePath);
        return filePath;
    }

public String userImgUpload(@RequestParam("file") MultipartFile file, HttpServletRequest request)

这上面这段代码，我在网上看到很多博客都没有标注，我这里解释说明一下。
@RequestParam(“file”) MultipartFile file 这里面的注解写的为什么是”file“？看下面的图片

我们可以看到，在action路径下的请求，有一个From Data 它默认的名字就叫”file“
我这边后台处理这个图片的思路是，把 MultipartFile 转换成base64，然后把base64转成二进制，在从二进制转换成图片写入文件中。

标题如果headers 报错，F12说不知道这个东西该怎么办

下面又是另外一种思路，下面这个思路是没有headers的解决方案
说不多说直接上代码
(记得改里面的action别拿起来就用)

<el-upload style="margin-left: 20px"
                     class="avatar-uploader"
                     action="http://106.53.120.132:8080/drawing_bed/drawing_bed/XXX"
                     :show-file-list="false"
                     :accept="'image/*'"
                     :on-success="handleAvatarSuccess"
                     :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>

好，我们的文件名字还是file，但是这里我们可以看到 它跟之前的有变化，它变成了二进制的格式传输，那MultipartFile 对二进制的支持还是非常友好的

上后台代码(我觉得这种方法还简单一点)

@CrossOrigin//跨域设置
    @PostMapping("/drawing_bed/XXX")//所以接口分开写
    public String userImgUpload(@RequestParam("file") MultipartFile file, HttpServletRequest request) throws IOException {
    //还是一样用日期做文件夹 
    //uploadPath ：C:\Users\XXX\Desktop
        String format = simpleDateFormat.format(new Date());
        File folder = new File(uploadPath + format);
        //如果没有该目录就创建一个
        if (!folder.isDirectory()) {
            folder.mkdirs();
        }

        System.out.println("imgName "+file.getOriginalFilename());
        // 获取文件名：test.jpg
        String fileName = file.getOriginalFilename();
        System.out.println("上传的文件名为：" + fileName);
        // 对上传的文件重命名，避免文件重名   把图片的后缀拿出来，使用uuid进拼接
        String newName = UUID.randomUUID().toString()+fileName.substring(fileName.lastIndexOf("."),fileName.length());
        String imgFilePath =uploadPath+format+newName;
        System.out.println("imgFilePath:"+imgFilePath);
        //由于我们的这个传输文件的格式变成了二进制，我们就用MultipartFile 里面的方法直接写入图片就好了，这个也是后面才发现的，前面的代码大家可以当笑话看
        file.transferTo(new File(imgFilePath));
        // 返回上传文件的访问路径
        String filePath = request.getScheme() + "://" + request.getServerName()
                + ":" + request.getServerPort()+"/drawing_bed"+"/"+ format + newName;
        System.out.println(filePath);
        return filePath;
    }