element-ui的upload组件(图片)的使用

问题描述:图片、文件等上传。
一、npm 安装。
二、使用。

<el-upload
  class="avatar-uploader"
   :action="UploadUrl()"
   :show-file-list="false"
   :on-success="success"
   :before-upload="beforeAvatarUpload"
   :headers="headers"
   name="file"
 >

:action = “XXX()”,绑定url,具体取值

UploadUrl() {
  return this.$api.imgUpload; // 要上传的后端服务器url
},

:headers="headers"绑定token验证(需要就带上,不需要则不用,具体情况看后端)

computed: {
    headers() {
      return {
        authorization: localStorage.getItem("headers"),
        Accept: "*/*"
      };
    }
  }

:on-success="success"上传成功的钩子,

success(file) {
 	let url = file.data.filePath;
 	// 需要拼接url就拼接,不用就直接url,this.imageUrl用于预览和传给后端
   this.imageUrl = this.$api.fileBaseUpload + `fileName=${url}`;
 },

其他的则可以参考elementui的文档
链接:https://element.eleme.cn/2.0/#/zhCN/component/upload#upload-shang-chuan

你可能感兴趣的:(element,upload,vue)