美文网首页
el-upload上传图片

el-upload上传图片

作者: 葵自渡_ | 来源:发表于2020-08-31 17:31 被阅读0次

方法一:
使用formData

<input type="file" @change="handlePreview($event)" accept="image/*" />
<el-button type="primary" @click="submit">提 交</el-button>
// 创建formdata对象
handlePreview(e) {
  this.formData = new FormData();
  this.formData.append("file", e.target.files[0]);  // file就是后台给的字段
},

// 上传提交
submit() {
  this.$axios
    .post("/api/file/uploadFileToAliyun.json", this.formData)
     .then(({ data }) => {
        this.info.pic = data;
        this.dialogVisible = false;
    });
  },

方法二:
使用el-upload

<el-upload
          action="/api/file/uploadFileToAliyun.json"
          list-type="picture-card"
          :on-success="handleSuccess"
>
    <i class="el-icon-plus"></i>
</el-upload>

action:请求接口的地址
:on-success:上传成功后的回调,第一个参数是接口返回的数据

handleSuccess(url) {
    this.info.pic = url;
},

url代表接口返回的图片地址,这里后台直接返给我url了
这里只是把图片上传了,但是还需要调用一下保存(更新)的接口

相关文章

网友评论

      本文标题:el-upload上传图片

      本文链接:https://www.haomeiwen.com/subject/zeqpsktx.html