这个问题网上有很多,但是很多都是水.
这里我记录下我的实现方式!
node 服务端
import formidable from 'formidable'/**
* 图片
*/
router.post('/api/user/addItem', (req, res) => {
// 增加数据
// 获取客户端传过来的商品信息
const form = new formidable.IncomingForm();
form.uploadDir = config.uploadsGoodsPath; // 上传图片放置的文件夹
form.keepExtensions = true; // 保持文件的原始扩展名
form.parse(req, (err, fields, files)=>{
if(err){
return next(err);
}
console.log(fields)
let title = fields.title;
let link = fields.link;
let arr = JSON.parse(fields.arrs_num);
console.log(arr.length,11111111)
let picUrl=[]
for(let i =0;i<arr.length;i++){
console.log(i,'aaaaaaaa')
picUrl.push('http://localhost:' + config.port + '/uploads/' + basename(files[`product_img_${i}`].path))
}
// let picUrl = 'http://localhost:' + config.port + '/uploads/' + basename(files['product_img_0'].path);
console.log(picUrl)
});
});前端
html部分就 不放了elementUI 里面的upload组件
<el-upload
action="#"
list-type="picture-card"
:auto-upload="false"
:limit="5"
:on-change="handleChange"
>
<i slot="default" class="el-icon-plus"></i>
<div slot="file" slot-scope="{file}">
<img
class="el-upload-list__item-thumbnail"
:src="file.url" alt=""
>
<span class="el-upload-list__item-actions">
<span
class="el-upload-list__item-preview"
@click="handlePictureCardPreview(file)"
>
<i class="el-icon-zoom-in"></i>
</span>
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleDownload(file)"
>
<i class="el-icon-download"></i>
</span>
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleRemove(file)"
>
<i class="el-icon-delete"></i>
</span>
</span>
</div>
</el-upload> createData() {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
this.temp.id = parseInt(Math.random() * 100) + 1024 // mock a id
this.temp.author = 'vue-element-admin'
this.temp.images=this.fileList.length>0?this.fileList:''
console.log(this.fileList[0].raw)
if(!this.temp.images){
this.$message({
message: '图片没传',
type: 'error'
})
return false
}
let formData = new FormData();
let arrs_num = []
for(let i = 0;i<this.fileList.length;i++){
formData.append('product_img_'+i, this.fileList[i].raw);
arrs_num.push(0)
}
console.log(arrs_num)
formData.append('title', this.temp.title);
formData.append('arrs_num', JSON.stringify(arrs_num));
formData.append('link', this.temp.link);
addItems(formData).then((res) => {
this.dialogFormVisible = false
this.getList()
})
}
})
},
handleChange(file, fileList) {
console.log(file);
console.log(fileList);
this.fileList = fileList;
},
