需求描述：需要将后台返回的图片路径赋值到img的 src
1 一个页面上传一张图片
当一个页面只有一个位置需要上传图片，很简单，直接绑定上传按钮
html页面
|
1
2
3
4
5
|
<div class="col-md-4"> <input class="hidden" accept="image/png,image/jpg" type="file" id="tempUploadFile" v-on:change="uploadPic($event)" /> <input class="hidden" v-model="mapItem.MapIcon" /> <img class="imgbgbox" v-bind:src="mapItem.MapIcon" /></div> |
js代码：封装上传图片的方法
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
uploadPic(e) { var _self = this; var inputFile = e.target; if (!inputFile.files || inputFile.files.length <= 0) { return; } var file = inputFile.files[0]; var formData = new FormData(); formData.append('file', file); formData.append('SaveDir', 'Map/MapItem'); formData.append("FileName", $.whiskey.tools.dateFormat(new Date(), "HHmmssffff")); $.ajax({ url: "/Upload/UploadPic",//后台上传图片的方法 type: 'POST', dateType: 'json', cache: false, data: formData, processData: false, contentType: false, success: function (res) { if (res.ResultType == 3) { var filePath = res.Data.file;//后台返回的图片路径 _self.mapItem.MapIcon = filePath;//将路径赋值到声明的变量中 } } });}, |
2 一个页面上传多张图片
当一个页面有多个位置需要上传图片，如果按照上面方法，得需要绑定多个上传函数，所以我把重复的部分封装出来,用到了promise函数
html页面
|
1
2
3
4
5
|
<div class="col-md-4"> <input class="hidden" accept="image/png,image/jpg" type="file" id="tempUploadFile" v-on:change="uploadPic($event)" /> <input class="hidden" v-model="mapItem.MapIcon" /> <img class="imgbgbox" v-bind:src="mapItem.MapIcon" /></div> |
js代码：封装上传图片的方法
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
uploadPic(e) { var _self = this; var inputfile = e.target; _self.uploadImg(inputfile).then(data => { _self.mapItem.MapIcon = data;//data为取到的图片路径 })},//封装函数 uploadImg(inputFile) { var _self = this; if (!inputFile.files || inputFile.files.length <= 0) { return; } return new Promise((suc,err)=>{ var file = inputFile.files[0]; var filepath = ""; var formData = new FormData(); formData.append('file', file); formData.append('SaveDir', 'Map/MapSite'); formData.append("FileName", $.whiskey.tools.dateFormat(new Date(), "HHmmssffff")); $.ajax({ url: "/Upload/UploadPic", type: 'POST', dateType: 'json', cache: false, data: formData, processData: false, async:false, contentType: false, success: function (res) { if (res.ResultType == 3) { filepath = res.Data.file; suc(filepath); } } }); }) },}, |
补充知识：vue 利用原生input上传图片并预览并删除
看代码~
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<template> <div class="com-upload-img"> <div class="img_group"> <div v-if="allowAddImg" class="img_box"> <input type="file" accept="image/*" multiple="multiple" @change="changeImg($event)"> <div class="filter" /> </div> <div v-for="(item,index) in imgArr" :key="index" class="img_box"> <div class="img_show_box"> <img :src="item" alt=""> <i class="img_delete" @click="deleteImg(index)" /> <!-- <i class="img_delete" @click="imgArr.splice(index,1)"></i> --> </div> </div> </div> </div></template> |
js部分
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
<script>export default { name: 'ComUpLoad', data() { return { imgData: '', imgArr: [], imgSrc: '', allowAddImg: true } }, methods: { changeImg: function(e) { var _this = this var imgLimit = 1024 var files = e.target.files var image = new Image() if (files.length > 0) { var dd = 0 var timer = setInterval(function() { if (files.item(dd).type !== 'image/png' && files.item(dd).type !== 'image/jpeg' && files.item(dd).type !== 'image/gif') { return false } if (files.item(dd).size > imgLimit * 102400) { // to do sth } else { image.src = window.URL.createObjectURL(files.item(dd)) image.onload = function() { // 默认按比例压缩 var w = image.width var h = image.height var scale = w / h w = 200 h = w / scale // 默认图片质量为0.7，quality值越小，所绘制出的图像越模糊 var quality = 0.7 // 生成canvas var canvas = document.createElement('canvas') var ctx = canvas.getContext('2d') // 创建属性节点 var anw = document.createAttribute('width') anw.nodeValue = w var anh = document.createAttribute('height') anh.nodeValue = h canvas.setAttributeNode(anw) canvas.setAttributeNode(anh) ctx.drawImage(image, 0, 0, w, h) var ext = image.src.substring(image.src.lastIndexOf('.') + 1).toLowerCase()// 图片格式 var base64 = canvas.toDataURL('image/' + ext, quality) // 回调函数返回base64的值 if (_this.imgArr.length <= 4) { _this.imgArr.unshift('') _this.imgArr.splice(0, 1, base64)// 替换数组数据的方法，此处不能使用：this.imgArr[index] = url; if (_this.imgArr.length >= 5) { _this.allowAddImg = false } } } } if (dd < files.length - 1) { dd++ } else { clearInterval(timer) } }, 1000) } }, deleteImg: function(index) { this.imgArr.splice(index, 1) if (this.imgArr.length < 5) { this.allowAddImg = true } } }}</script> |
以上这篇vue 使用原生组件上传图片的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/hhhhhhenrik/article/details/89708519
