Element upload组件上传图片与回显图片

最新推荐文章于 2024-07-23 15:11:30 发布

宏-

最新推荐文章于 2024-07-23 15:11:30 发布

阅读量4.6k

点赞数 1

分类专栏： vue

原文链接：https://www.cnblogs.com/lidonglin/p/11577602.html

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

场景：新增商品时需要添加商品主图，新增成功之后可编辑

上传图片：

复制代码

<el-form-item label="专区logo：" style="height:160px">
            <div class="img">
              <el-upload
                action="https://testopenapi.nbdeli.com/crm/customer/saveChannelLogoFile"
                :limit="1"
                :on-preview="handlePictureCardPreview"
                :on-success="handleUploadSuccess"
                list-type="picture-card"
                :on-remove="handleRemove"
                :class="{disabled:uploadDisabled}"
                :file-list="fileList"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="ruleForm.dialogImageUrl" alt />
              </el-dialog>
            </div>
            <div class="imgSpan2">只能上传jpg/png文件，50X50px</div>
          </el-form-item>

复制代码

data(){
  return{
    uploadDisabled: false,

logoId: "1", //专区logo id

dialogVisible: false,

      fileList: [],
       ruleForm: {
        dialogImageUrl: "1", //专区logo 上传到后台之后，后台会返回一个id,只需要给后台传id,但是点击编辑的时候后台返回的是http地址
      },
   }  
}

复制代码

//删除图片

handleRemove(file, fileList) {

console.log(file);

this.uploadDisabled = false;

//上传中
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      console.log(this.dialogImageUrl);
      this.dialogVisible = true;
      this.uploadDisabled = true;
    },
    //上传成功
    handleUploadSuccess(file) {
      this.ruleForm.dialogImageUrl = file.result; //专区logoId
      this.uploadDisabled = true;
    },

复制代码

上传图片就完成了

以下是编辑图片;

复制代码

在点击编辑的时候 ，获取url地址
需要把url 添加到 fileList 里面

let urlStr = response.data.result.url.split(","); //logo地址
          urlStr.forEach(item => {
            let obj = new Object();
            obj.url = item;
            this.fileList.push(obj);
          });