美文网首页
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