Element UI 實現上傳圖片的功能
阿新 • • 發佈:2022-03-30
只需要把
<el-upload action="">中的action等於增加方法的地址,即ajax中url等於的東西
上傳圖片時,預設name=file
Element UI 實現上傳圖片功能的程式碼如下:
<template>
<!--<div>輪播</div>-->
<div class="login-box">
<el-upload
class="upload-demo"
action="http://localhost:8080/lunbo/insert"
:on-preview=" handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="3"
:on-exceed="handleExceed"
:file-list="fileList">
<el-button size="small" type="primary" >點選上傳</el-button>
<div slot="tip" class="el-upload__tip" >只能上傳jpg/png檔案,且不超過500kb</div>
</el-upload>
</div>
</template>
<script>
export default {
name: "add-file",
data(){
return {
fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100 '}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
};
},
methods:{
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
handleExceed(files, fileList) {
this.$message.warning(`當前限制選擇 3 個檔案,本次選擇了 ${files.length} 個檔案,共選擇了 ${files.length + fileList.length} 個檔案`);
},
beforeRemove(file, fileList) {
return this.$confirm(`確定移除 ${ file.name }?`);
},
addfile(formName){
this.$refs[formName].validate((valid) => {
var vm=this;
if(valid){
console.log(vm.form.url);
this.$axios({
method:'post',
url:'http://localhost:8080/lunbo/insert',
enctype:'multipart/form-data',
data:{
url:this.form.url
}
}).then(function (resp) {
console.log(resp.data);
if(resp.data=="success"){
console.log('真棒');
/*vm.$router.push("/UserList")*/
vm.$message({
message: '恭喜你,新增成功',
type: 'success'
});
}else{
vm.$message.error('新增失敗');
return false;
}
})
}
});
}
}
}
</script>
<style scoped>
</style>