美文网首页
el-upload回显

el-upload回显

作者: 秀萝卜 | 来源:发表于2020-06-11 18:08 被阅读0次

    https://blog.csdn.net/qq_45272329/article/details/92820856

    核心代码:

    // HTML
    <div class="form-item-height">
       <label class="text-right">添加商品图片:</label>
       <el-upload
         action="string"  //使用自定义上传任意写一个
         list-type="picture-card"
         accept=".jpg,.jpeg,.png,.bmp" //接收上传文件类型
         :http-request="uploadImg"   //自定义上传文件函数
         :on-preview="handlePictureCardPreview"
         :on-remove="handleRemove"
         :on-change="maxUploadNum"
         :before-upload="checkUpload"
         :limit="10"
         :file-list="imgFilesList"
       >
         <i class="el-icon-plus"></i>
       </el-upload>
       <el-dialog :visible.sync="dialogVisible" size="tiny">
         <img width="100%" :src="dialogImageUrl" alt>
       </el-dialog>
     </div>
    ————————————————
    版权声明:本文为CSDN博主「qq_45272329」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/qq_45272329/article/details/92820856
    
    //js imgFilesList 后台返回base64数据
    res.data.data.file.forEach(item => {  //处理图片需要转格式
       let imageUrl = `data:image/${item.type};base64,`+ item.image;
       this.imgFilesList.push({
         "url": imageUrl,
         "name":item.name,
         "id": item.id
       })
     })
    
    

    相关文章

      网友评论

          本文标题:el-upload回显

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