记Element的upload组件上传至阿里Oss存储服务器

在后端已经写好了Oss文件上传的接口：http://localhost:8081/oss/upload

该接口接收 MultipartFile 这个文件对象，然后将文件上传至阿里的Oss存储服务器，返回上传后文件的部分信息

以下是上传代码封装后的请求方法：

    @PostMapping("/upload")
    public Result upload(MultipartFile file){
        String upload = aliOssService.upload(file);
        return Result.ok().message(upload);
    }

 

 在Element中，使用el-upload组件进行前端的图片上传可视化操作

其官网给出的demo代码如下：

<el-upload
  class="avatar-uploader"
  action="https://jsonplaceholder.typicode.com/posts/"
  :show-file-list="false"
  :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>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

<script>
  export default {
    data() {
      return {
        imageUrl: ''
      };
    },
    methods: {
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        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;
      }
    }
  }
</script>

其中，action属性较为关键，其官网解释：必选参数，上传的地址。上传的地址可以是本地后端接口服务地址，也可以是外网服务器地址。上面代码就是官网给出的默认上传地址，是element官方上传地址，如需要修改上传地址为本地上传地址，则将action="https://jsonplaceholder.typicode.com/posts" 改为 action="http://localhost:8081/oss/upload"本地的上传文件接口就可以在阿里Oss服务中看到上传上去的文件。而不用纠结MultipartFile是一个什么样的文件对象以及el-upload组件返回的file是一个怎样的对象这些问题。关于MultipartFile是什么文件对象以及el-upload组件返回的file是一个怎样的对象这两个问题，等近段时间有空后再深入了解。