后端内容
引入文件
var router = require('express').Router()
//解析文件
const formidable = require('formidable')
const { IncomingForm } = require('formidable')
//写接口
router.post('/questImg', (req, res) => {
if (req.method == 'POST') {
const form = new IncomingForm({
multiples: true,
uploadDir: path.join(__dirname, 'upload', 'image'),
keepExtensions: true,
})
form.parse(req, (err, fields, files) => {
var imgUrl =
'http://192.168.218.13:2000/upload/image/' + files.filed.newFilename
// res.send(JSON.stringify({ fields, files, imgUrl }))
// res.send(JSON.stringify({ fields, files,imgUrl}))
// console.log(fields,files)
pool.query(
'select * from user where name=?',
[fields.username],
(err, data) => {
//删除原先的图片地址
var url = data[0].img_url.split('/')[5]
console.log(url)
const list = fs.readdirSync('./serve/upload/image')
//判断之前是否由值
if (list.indexOf(url) != -1) {
const files = fs.statSync('./serve/upload/image/' + url)
if (files.isFile()) {
//是文件直接删除
fs.unlinkSync('./serve/upload/image/' + url)
}
}
if (data.length !== 0) {
pool.query(
'UPDATE user SET img_url=? where name=?',
[imgUrl, fields.username],
(error, data) => {
if (error) {
res.json({
code: 202,
message: '修改失败',
})
// console.log(error)
return
} else {
res.json({
code: 200,
message: '修改成功',
// data: data,
})
return
}
},
)
} else {
res.json({
code: 206,
message: '上传失败',
})
}
},
)
})
}
})
前端
<template>
<label>请选择文件</label><br>
<input type="file" ref="addimgs" @change="() => addImg()">
<button @click="() => addsumbit()">提交</button>
</template>
<script lang="ts" setup>
import { addIm } from '@/api/user'
import storage from '@/store/sessionStorage';
import { ref } from 'vue'
const addimgs: any = ref(null)
const storages: any = storage
const filename: any = ref({})
// const name=
// console.log(storages.session.get('name'))
const addsumbit = async () => {
var username: any = storages.session.get('name')
let formData = new FormData();
formData.append('filed', filename.value);
// formData.append('type', "head");
formData.append('username', username);
// formData.set('fields',username)
const result = await addIm(formData)
console.log(result)
}
const addImg = () => {
// console.log(addimgs.value.files[0])
filename.value = addimgs.value.files[0]
}
</script>
<style lang="less">
.userbox {
width: 100px;
height: 100px;
}
</style>
//请求接口一定要挂heads
export const addIm=(params: any)=> http({ method: 'post', url: '/api/questImg', data:params, headers: {'Content-Type': 'application/x-www-form-urlencoded'}, })
网友评论