Vue+element实现图片的上传与显示

业务逻辑：某个模块新增时新增图片，详情显示也有图片字段，编辑也能对图片进行编辑。

1.图片上传

自己写了一个图片上传的组件，在父组件中引入即可，图片上传组件返回一个图片id的数组，然后在父组件的上传函数中把图片id传给对应的字段即可。

父组件：

<template><div><el-form-item label="图片" prop="img"><imageUpload v-on:change="change"/></el-form-item></div>
</template><script>
import imageUpload from '../../../components/imageUpload.vue'
export default {components: {imageUpload},data() {return {imgIdArr: [],}},methods:{change(data){this.imgIdArr=data},}
}
</script>

子组件：

<template><el-uploadclass="upload-demo":action="uploadAction":on-remove="onRemove":on-success="onSuccess"list-type="picture":file-list="fileList"name="files[]"><el-button size="small" type="primary">点击上传</el-button></el-upload>
</template><script>
export default {data () {return {uploadAction: '',type:0,dir:null,sourceId:null,createrId:null,  //上传人员fileList: [],imgIdArr: [],}},methods: {init(){var vm=thisthis.imgIdArr = [];this.uploadAction = this.$api.getJavaEndPoint() + 'web/oss/jqupload?type='+this.type+'&dir='+this.dir+'&createrId'+this.createrId;// 上传地址，this.$api.getJavaEndPoint()是自己配置的url开头if(this.sourceId){this.uploadAction = this.uploadAction+'&sourceId='+this.sourceId;}},// 移除图片onRemove(file) {this.$api.sysFileDel(file.id, function (data) {});for (var i = 0; i < this.imgIdArr.length; i++) {var cur = this.imgIdArr[i];if (cur === file.id) {this.imgIdArr.splice(i--, 1);}}},// 上传图片成功onSuccess(resp, file, fileList) {if (resp && resp.data.files && resp.data.files.length > 0) {for (var i = 0; i < resp.data.files.length; i++) {var cur = resp.data.files[i];this.imgIdArr.push(cur.id);file.id = cur.id;}}this.$emit('change',this.imgIdArr)},},created () {this.init()}
}
</script><style lang='css' scoped></style>

2.详情显示图片

图片展示时，根据接口返回的数据(数据中有图片的url)处理图片字段，然后显示在页面即可

<template><div><p>图片：</p><el-imagev-for='item in urlList':key='item.id':src="item.url"style="width:200px"></el-image></div>
</template><script>export default {data() {return {urlList: [],}},methods:{init(id){var vm = this;this.urlList=[]this.$api.ctrlCenterDetail({ obj: { id: id } }, function(data) {if(data.sysFiles.length>0){for(var i=0;i<data.sysFiles.length;i++){if(data.sysFiles[i].url){data.sysFiles[i].url=vm.$api.getPicPrefix()+data.sysFiles[i].urlvm.urlList.push(data.sysFiles[i])}}}vm.msg = data});vm.detailDialogVisible = true}}
}
</script>

3.编辑图片

<template><div class="grid-content bg-purple"><el-form-item label="图片" prop="img"><el-uploadclass="upload-demo":action="uploadAction":on-remove="onRemove"list-type="picture":file-list="fileList"name="files[]"><el-button size="small" type="primary">点击上传</el-button></el-upload></el-form-item>
</div>
</template><script>export default {data() {return {fileList: [],uploadAction: '',type:0,dir:null,sourceId:null,createrId:null,  //上传人员}},methods:{init(id){var vm = thisthis.fileList=[]this.sourceId=idthis.uploadAction = this.$api.getJavaEndPoint() + 'web/oss/jqupload?type='+this.type+'&dir='+this.dir+'&createrId'+this.createrId+'&sourceId='+this.sourceId;var pop = this.fileList.pop();this.$api.ctrlCenterDetail({ obj: { id: id } }, function(data) {if (data.sysFiles.length>0) {for(var i=0;i<data.sysFiles.length;i++){if(pop){pop.url = vm.$api.getPicPrefix() + data.sysFiles[i].url;pop.id = data.sysFiles[i].id;vm.fileList.push(pop);}else{vm.fileList.push({id: data.sysFiles[i].id, url: vm.$api.getPicPrefix() + data.sysFiles[i].url});}}}vm.detailsInfo = datavm.editDialogVisible = true});},onRemove(file) {this.$api.sysFileDel(file.id, function (data) {})},}
}
</script>

总结：element里有现成的文件上传的组件，但是需要配置服务器地址，还有是其他的一些改动，本文是具体的业务逻辑。

图片上传时，子组件返回图片的id，然后给后台返回对应的图片id。图片展示时，只需根据接口返回的路径展示即可。图片编辑时，根据具体的模块写入具体的来源id，this.uploadAction传参（比如监控中心就传某条监控中心的id）。

Vue+element实现图片的上传与显示相关推荐

php中图片文件上传，显示缩略图
php中图片文件上传,显示缩略图 htm代码块: <meta charset="utf-8" /> <style>img {max-width: 100px ...
vue移动端图片裁剪上传
1. 安装cropperjs依赖库 npm install cropperjs 2. 编写组件SimpleCropper.vue <template><div class=" ...
Django上传并显示图片
Django上传并显示图片非常详细的教程,教大家一步步用Django上传与显示图片.用例子学习是一个不错的方法,下面我用一个非常简单的例子为大家讲解Django中图片的上传与显示. 1. 创建名称为 ...
vue+element实现图片上传及裁剪功能（vue-cropper）
需求背景: 上传图片或者头像时,能够将图片进行裁剪(等比例缩放裁剪或非等比例裁剪) 效果图: 安装使用 1.安装 npm install vue-cropper // npm 安装 yarn add ...
结合axios(formdata)+vue-cropper+element ui实现头像图片剪切上传
萌新用vue + axios + formdata 上传文件的爬坑之路 https://blog.csdn.net/qq_41688165/article/details/80834842 结合vue ...
【vue开发问题-解决方法】（九）使用element upload自定义接口上传文件，input多文件上传
[vue开发问题-解决方法](九)使用element upload自定义接口上传文件,input多文件上传参考文章: (1)[vue开发问题-解决方法](九)使用element upload自定义接 ...
vue中使用axios post上传头像/图片并实时显示到页面
前端开发中,为了更好的用户体验,在头像上传时会先将图片显示到页面然后点击保存按钮完成图片的上传成功代码部分有参考他人的写法. html代码: <div id="myPhoto&qu ...
vue之使用Cropper进行图片剪裁上传压缩
vue之使用Cropper进行图片剪裁上传在项目中,对上传的图片按照比例和尺寸进行裁剪,以便于应用到不同的场景和平台上.这里采用cropper插件裁剪图片一.cropper的使用使用教程:htt ...
一个基于Vue的移动端多文件上传插件，支持常见图片的上传。
特性多文件上传上传图片预览上传状态监测删除指定图片清空图片重新上传安装 npm i vue-easy-uploader --save 使用在入口文件main.js中加入以下代码: im ...

Vue+element实现图片的上传与显示

1.图片上传

3.编辑图片

Vue+element实现图片的上传与显示相关推荐

最新文章

热门文章