有关vue组件上传问题

今天在做需求的时候，有一个是关于营业执照上传的问题：这里坐一下记录，方便后续相同问题 直接使用

代码:这里用的若依框架 更多详细见若依文档

 <el-upload 
 :action="uploadImgUrl" 
 list-type="picture-card" 
 :on-success="handleUploadSuccess" 
 name="file"
 :on-remove="handleRemove" 
 :on-exceed="handleExceed" 
 :show-file-list="true" 
 :limit="limitPicture"
:headers="headers" 
:file-list="fileList" 
:on-preview="handlePictureCardPreview"
:class="{hide: this.fileList.length >= 1}">
<i class="el-icon-plus"></i>
</el-upload>


return{
	limitPicture: 1, //图片上传限制
	uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
	fileList: [],
	// 设置上传的请求头部
	headers: {
		Authorization: "Bearer " + getToken()
	},
}

      // 上传成功回调
      handleUploadSuccess(res) {
        // 赋值对应的营业执照信息
        this.dialogImageUrl = res.url
      },
      // 文件个数超出
      handleExceed() {
        this.$message.error(`上传文件数量不能超过 ${this.limitPicture} 个!`);
      },
      // 删除图片(这里营业执照只允许一张 所以删除直接清空即可)
      handleRemove(file, fileList) {
        this.fileList = []
        this.dialogImageUrl = ""
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },

效果