使用vue的el-form和el-form-item表单实现图片的上传（springboot+vue3）

1.在vue页面的<template></template>标签里面写如下代码，其中的form是双向绑定的对象数据，在input按钮绑定了一个changeImg的方法，且其类型为file的文件类型。

      <el-form :model="form" ref="ruleFormRef" :rules="rules" status-icon>
        <el-form-item label="上传图片" prop="productimagesrc">
          <input @change='changeImg' id='imgFile' type='file'/>
　　　　　　　<!-- 展示服务器返回的图片 -->
　　　　　　<img style="width: 200px;height: 200px" :src='form.productimagesrc'/>
        </el-form-item>
      </el-form>

2.定义双向绑定的数据类型

  data() {
    return {
      form: {
        productimagesrc: ''
      },
        
    };
  },

3.changeImg方法的实现过程，利用id来获取到上传的文件数据，再构建FormData对象，把获取到的数据存储到里面去，作为参数传给数据接口。因为后端的Java代码参数的数据类型是MultipartFile，需要使用FormData对象与其对应，若直接使用id来获取到上传的文件数据作为参数，会报数据类型不匹配的错误。

    changeImg(){
      var that = this;  //这里使用一个变量 that来拼接this,这样的话在内部就使用thar,在外部就使用this,这样就不会出现指向丢失问题。
      var file = document.getElementById("imgFile").files[0]; //获取文件
      console.log("file：",file)
      var formData = new FormData(); //构造一个 FormData，把后台需要发送的参数添加到FormData里面，这样就可以直接把formData作为参数传递了
      if (file) {
        formData.append("file", file);　　　//接口需要传递的参数
      }

      let urls = 'http://localhost:8088/productConsumer/upload';   //数据接口
      axios.post(urls,formData)
              .then(function(reh){
                console.log('rehsdddddd===>>>', reh);
                that.form.productimagesrc = reh.data.result
              })
              .catch(function(err){
                console.log('err=ssss=>>', err);
              })
    },

4.springboot上传图片到阿里云oss需要的依赖

        <dependency>
            <groupId>com.aliyun.oss</groupId>
            <artifactId>aliyun-sdk-oss</artifactId>
            <version>3.15.0</version>
        </dependency>

5.OssConstant类

public  class OssConstant {
    // 桶地址（有坑，后面必须要加"/"）
    public static final String   ALI_OOMAIN = "";
    // Endpoint是域名，其它Region请按实际情况填写。
    public static final String endpoint = "";
    // 采用ram授权，该秘钥只能用于oss对象的存储
    public static final String AccessKeyID = "";
    public static final String AccessKeySecret = "";
    // 桶地址（有坑，后面必须要加"/"）
    public static final String BucketName = "";
}

6.OssUitl工具类

public class OssUitl {
    /**
     * @param file
     * @return 图片地址
     * @throws IOException
     */
    public static String upload(MultipartFile file) throws IOException {
        String orignfileName = file.getOriginalFilename();//获取原文件名称
        String ext = "."+ FilenameUtils.getExtension(orignfileName); //截留".png"
        //将名字中的“-”,去除（可以不去，但链接有可能有问题）
        String uuid = UUID.randomUUID().toString().replace("-","");
        //新的文件名
        String fileName = uuid + ext;
//        可以添加目录
        String dir = "01/";
//        将名称与文件合拼
        String filePath = dir+fileName;

//        oss示例对象
        OSS ossClient =new OSSClientBuilder().build(OssConstant.endpoint,OssConstant.AccessKeyID,OssConstant.AccessKeySecret);
        ossClient.putObject(BucketName,filePath,file.getInputStream());
//        将对象关闭
        ossClient.shutdown();
//        返回图片地址信息
        return OssConstant.ALI_OOMAIN+filePath;
    }
}

7.ResponseData 工具类

/**
 * 向前端响应统一的数据格式
 */
@Data
@AllArgsConstructor
@NoArgsConstructor
public class ResponseData {
    private Integer code=200;
    private String msg="成功";
    private Object result;
    private Long count;


    public static ResponseData success(){
        return new ResponseData();
    }

    public static ResponseData success(Object data, Long total){
        ResponseData responseData = new ResponseData();
        responseData.setResult(data);
        responseData.setCount(total);
        return responseData;
    }

    public static ResponseData error(String msg){
        return new ResponseData(-1,msg,null,null);
    }
}

8.ProductController 类

@RestController
@RequestMapping("productConsumer")
public class ProductController {
    @PostMapping("upload")
    public ResponseData upload(MultipartFile file) throws IOException {
        return ResponseData.success(OssUitl.upload(file),1L);
    }
}

至此利用ProductController 类中的upload方法可得到上传到阿里云oss的图片真实地址。最后在vue里面进行读取回显即可。