看一下重點內(nèi)容贬墩，然后再看代碼精肃，你就會很好理解了
第一步
upLoad圖片上傳組件中
:before-upload="beforeupload" 方法中return為false 來進行阻止action上傳地址，必填項上傳圖片
第二步創(chuàng)建一個變量
param:new FormData();//表單上傳的方法
第三步
把所需的表單參數(shù)和圖片地址參數(shù)追加到創(chuàng)建的表單方法中param
this.param.append('u_icon', file);//在beforeupload事件中
var form = this.form;
this.param.append('username', form.username);
this.param.append('user_id', form.user_id);
第四步
在axios中傳入param參數(shù)和config的參數(shù)就行了
let config = {
headers: {
'Content-Type': 'multipart/form-data'
}
};
axios.post(baseUrl+"/one/editmyprofile/",data,config)
代碼
<!--這個組件主要用來研究upload這個elementui的上傳插件組件-->
<template>
<div id="upload">
<label class="el-form-item__label" style="width: 80px;">
頭像
</label>
<!--elementui的上傳圖片的upload組件-->
<el-upload
class="avatar-uploader"
action=""
:show-file-list="false"
:before-upload="beforeupload">
<img v-if="src" :src="src" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<!--elementui的form組件-->
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="用戶名">
<el-input v-model="form.username" name="names" style="width:360px;"></el-input>
</el-form-item>
<!-- <el-form-item label="手機號">
<el-input v-model="form.phonenumber" name="names" style="width:360px;"></el-input>
</el-form-item> -->
<el-form-item label="郵箱">
<el-input v-model="form.email" name="names" style="width:360px;"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">保存</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import url from '../../common/api'
export default {
data() {
return {
form: {//form里面的參數(shù)
username: '',
user_id : 10,
// phonenumber:'',
email:'',
},
param:new FormData(),//表單要提交的參數(shù)
src:"", //展示圖片的地址
};
},
methods: {
//阻止upload的自己上傳潜慎，進行再操作
beforeupload(file) {
console.log(file);
//創(chuàng)建臨時的路徑來展示圖片
var windowURL = window.URL || window.webkitURL;
this.src=windowURL.createObjectURL(file);
this.param.append('u_icon', file);
return false;
},
onSubmit(){//表單提交的事件
var form = this.form;
this.param.append('username', form.username);
this.param.append('user_id', form.user_id);
// this.param.append('phonenumber', form.phonenumber);
this.param.append('email', form.email);
--------url引用中的設(shè)置
getData.UserInformation = (data)=>{
let config = {
headers: {
'Content-Type': 'multipart/form-data'
}
};
return http.post(baseUrl+"/one/editmyprofile/",data,config)
}
-------
url.UserInformation(this.param).then(res=>{
console.log(res,'------成功發(fā)送驗證碼')
}).catch(err=>{
console.log(err,'-------失敗發(fā)送驗證碼')
})
}
}
}
</script>
<style lang="stylus" scoped>
>>>.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
>>>.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
>>>.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
}
>>>.avatar {
width: 100px;
height: 100px;
display: block;
}
</style>
原理捡多，form表單的數(shù)據(jù)就是new FormData()，這樣就是算是form表單提交模擬了
后端代碼參考
通過上面的組件铐炫，在post中傳輸后垒手，后臺接受通過fomidable插件來處，這里用的是node倒信，把圖片和表單的數(shù)據(jù)保到數(shù)據(jù)庫和本地的靜態(tài)資源文件夾里面科贬，如下面：
//這個是后臺的routers文件夾下面的upload.js文件
var express = require('express');
var router = express.Router();
var handler = require('./dbhandler.js'); //封裝的mongodb的增刪改查和分頁基本操作的文件；
var ObjectId = require('mongodb').ObjectId; //對mongo的_id處理的插件鳖悠；
var formidable = require('formidable');
var fs = require("fs");
router.post("/",function(req,res,next){
var form = new formidable.IncomingForm();
//設(shè)置文件上傳存放地址
//form.uploadDir = "./public/images";
//執(zhí)行里面的回調(diào)函數(shù)的時候榜掌，表單已經(jīng)全部接收完畢了。
form.parse(req, function(err, fields, files) {
console.log("files:",files) //這里能獲取到圖片的信息
console.log("fields:",fields) //這里能獲取到傳的參數(shù)的信息乘综，如上面的message參數(shù)憎账，可以通過fields。message來得到
})
})
module.exports = router;
