44.Vue文件上传(axios方式)

Vue的模板中不用使用Form方式提交，不用使用submit按钮，形式更灵活。
1.使用<input>的file类型，加普通按钮

<div>
  <input style="display: flex;align-items: center;" name="file" type="file" accept="image/png,image/gif,image/jpeg"
         @change="getFile"/>
  <el-button size="mini" @click="submit" type="success">上传</el-button>
</div>

@change监听文件选择的变化，获取变化后的文件
@click="submit"为普通的点击事件
2.由于需求限制一次只能添加一张图片

//数据
fileList: [],
//添加文件方法
getFile(event) {
  this.fileList = [];
  this.fileList.push(event.target.files[0]);
},
//创建表单对象进行提交的方法
submit() {
  let formData = new FormData();
  formData.append('file', this.fileList[0]);
  goodsApi.uploadImages(formData)
    .then(response => {
      var ret = response.data;
      console.log(JSON.stringify(ret));
      if (ret.flag) {
        var url = ret.data;
        this.pojo.url = url;
        this.$forceUpdate();
      } else {
        this.$message.error(ret.message);
      }
    })
    .catch(error => {
      console.log(error)
    })
},

3.JS端上传接口实现

  uploadImages(files) {
    return request({
      url: `/${group_name}/uploadImages`,
      method: 'post',
      data: files,
      headers: {'Content-Type': 'multipart/form-data'}
    })
  },

4.后台接口格式

    @PostMapping("/uploadImages")
    public Result<String> testUpload(@RequestBody MultipartFile file) {
        String url = pictureService.uploadPic(file);
        return new Result<>(true, StatusCode.OK, "成功", url);
    }

5.后台实现和文件服务器的部署在另一篇中