vue 원본 구성 요소를 사용하여 그림을 업로드하는 실례
한 페이지에 사진 한 장 올리기
한 페이지에 한 위치만 있으면 그림을 업로드해야 합니다. 간단합니다. 업로드 단추를 직접 연결합니다.
html 페이지
<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 코드: 사진을 봉인하여 업로드하는 방법
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 페이지
<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 코드: 사진을 봉인하여 업로드하는 방법
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를 이용하여 그림을 업로드하고 미리 보고 삭제합니다코드 봐~
<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>
부분
<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가 원생 구성 요소를 사용하여 그림을 업로드한 실례는 바로 편집자가 여러분에게 공유한 모든 내용입니다. 여러분께 참고가 되고 저희를 많이 사랑해 주시기 바랍니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.