Requirement description: The image path returned by the background needs to be assigned to the src of img
1 Upload one image on one page
When there is only one location on a page, it is very simple, directly bind the upload button
html page
<div class="col-md-4"> <input class="hidden" accept="image/png,image/jpg" type="file" v-on:change="uploadPic($event)" /> <input class="hidden" v-model="" /> <img class="imgbgbox" v-bind:src="" /> </div>
js code: method to encapsulate upload images
uploadPic(e) {
var _self = this;
var inputFile = ;
if (! || <= 0) {
return;
}
var file = [0];
var formData = new FormData();
('file', file);
('SaveDir', 'Map/MapItem');
("FileName", $.(new Date(), "HHmmssffff"));
$.ajax({
url: "/Upload/UploadPic",// Method of uploading pictures in the background type: 'POST',
dateType: 'json',
cache: false,
data: formData,
processData: false,
contentType: false,
success: function (res) {
if ( == 3) {
var filePath = ;//The image path returned in the background _self. = filePath;// Assign the path to the declared variable }
}
});
},
2 Upload multiple pictures on one page
When there are multiple locations on a page that needs to upload images, if you follow the above method, you need to bind multiple upload functions, so I encapsulate the duplicate parts and use thempromisefunction
html page
<div class="col-md-4"> <input class="hidden" accept="image/png,image/jpg" type="file" v-on:change="uploadPic($event)" /> <input class="hidden" v-model="" /> <img class="imgbgbox" v-bind:src="" /> </div>
js code: method to encapsulate upload images
uploadPic(e) {
var _self = this;
var inputfile = ;
_self.uploadImg(inputfile).then(data => {
_self. = data;//data is the image path obtained })
},
//Encapsulation function uploadImg(inputFile) {
var _self = this;
if (! || <= 0) {
return;
}
return new Promise((suc,err)=>{
var file = [0];
var filepath = "";
var formData = new FormData();
('file', file);
('SaveDir', 'Map/MapSite');
("FileName", $.(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 ( == 3) {
filepath = ;
suc(filepath);
}
}
});
})
},
},
Supplementary knowledge:vue uploads images with native input, previews and deletes
Look at the code ~
<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="(index,1)"></i> --> </div> </div> </div> </div> </template>
js part
<script>
export default {
name: 'ComUpLoad',
data() {
return {
imgData: '',
imgArr: [],
imgSrc: '',
allowAddImg: true
}
},
methods: {
changeImg: function(e) {
var _this = this
var imgLimit = 1024
var files =
var image = new Image()
if ( > 0) {
var dd = 0
var timer = setInterval(function() {
if ((dd).type !== 'image/png' && (dd).type !== 'image/jpeg' && (dd).type !== 'image/gif') {
return false
}
if ((dd).size > imgLimit * 102400) {
// to do sth
} else {
= ((dd))
= function() {
// By default, scaled var w =
var h =
var scale = w / h
w = 200
h = w / scale
// The default image quality is 0.7. The smaller the quality value, the more blurry the drawn image var quality = 0.7
// Generate canvas var canvas = ('canvas')
var ctx = ('2d')
// Create attribute node var anw = ('width')
= w
var anh = ('height')
= h
(anw)
(anh)
(image, 0, 0, w, h)
var ext = (('.') + 1).toLowerCase()// Picture format var base64 = ('image/' + ext, quality)
// The callback function returns the value of base64 if (_this. <= 4) {
_this.('')
_this.(0, 1, base64)// Methods to replace array data, cannot be used here: [index] = url; if (_this. >= 5) {
_this.allowAddImg = false
}
}
}
}
if (dd < - 1) {
dd++
} else {
clearInterval(timer)
}
}, 1000)
}
},
deleteImg: function(index) {
(index, 1)
if ( < 5) {
= true
}
}
}
}
</script>
The above example of uploading images using native components is the entire content I share with you. I hope you can give you a reference and I hope you can support me more.