网络编程 
首页 > 网络编程 > 浏览文章

vue+elementUI实现图片上传功能

(编辑:jimmy 日期: 2024/11/28 浏览:3 次 )

本文实例为大家分享了vue+elementUI图片上传的具体代码,供大家参考,具体内容如下

1、html

<el-form-item label="图片" prop="logo">
 <el-upload name="file" v-if="optype==0" 
  :action="'/upload'" 
  accept=".jpg, .png" 
  list-type="picture-card" 
  :file-list="fileLists" 
  :on-preview="handlePictureCardPreview" 
  :on-success="success" 
  :on-remove="handleRemove">
 <i class="el-icon-plus"></i>
 </el-upload>
 <!--大图弹出框-->
 <el-dialog :visible.sync="imgDialogVisible" size="full" :modal="false" title="查看大图片">
 <img width="100%" :src="/UploadFiles/2021-04-02/dialogImageUrl">

2、定义

dialogImageUrl: '', 
imgDialogVisible: false, 
fileLists: [], 

3、在需要使用的方法中给fileLists[]赋值

vm.fileLists = [];
if (row.logo != undefined && row.logo != "") {
 vm.fileLists.push({url:row.logo});
}

4、其他几个属性的方法

//删除图片
handleRemove(file, fileList) {
 this.form.logo=''
},
//查看大图
handlePictureCardPreview(file) {
 this.dialogImageUrl = file.url;
 this.imgDialogVisible = true;
},
//图片上传成功
success(response, file, fileList) {
 this.fileLists = [];
 this.fileLists = [file]
 this.form.logo = file.response.result;
},

5、图片上传的位置和路径是存在不同的表中。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

上一篇:vue 获取视频时长的实例代码
下一篇:vue+elementUi图片上传组件使用详解
高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 网站地图 SiteMap