前端效果图:
文件结构:
imgup.vue 代码
<template>
<view>
<view class='pages'>
<view class='father_view'>
<view class='son_view'>
<view class="title-bg">请描述质量问题(最多120个汉字):</view>
<textarea class="textarea-bg" v-model="text1" @blur="inputText" placeholder="请输入内容" />
</view>
</view>
<!-- 图片 -->
<view class="images_box">
<block v-for="(item, index) in imglist" :key="index">
<view class='img-box'>
<image class='img' :src='item' mode='aspectFill'></image>
<view class='img-delete' @click='imgDelete1' :data-delindex="index">
<image class='img' src='../../static/delect.png' ></image>
</view>
</view>
</block>
<view class='img-box' @click='addPic1' v-if="imglist.length<9">
<image class='img' src='../../static/add_image.png'></image>
</view>
</view>
<button @click='uploadimage'>上传图片</button>
<button @click='viewmemo'>查看留言</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
imglist:[],
text1:'',
}
},
onLoad() {
},
methods: {
inputText:function (e) {
this.text1 = e.detail.value
},
addPic1: async function() {
let that = this
uni.chooseImage({
count: 9,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: function (res) {
if (that.imglist.length === 0) {
that.imglist = res.tempFilePaths
} else if (that.imglist.length < 9) {
that.imglist = that.imglist.concat(res.tempFilePaths);
}
},
})
},
imgbox: function (e) {
this.imglist = e.detail.value
},
imgDelete1: function (e) {
let index = e.currentTarget.dataset.delindex;
this.imglist.splice(index, 1);
},
uploadimage: function () {
let app = getApp()
let upimg = require("./upimg.js");
let that = this;
if (that.imglist.length != 0) {
upimg.uploadimg({
url: app.globalData.url+'/imgup',
path: that.imglist,
text: that.text1,
user: app.globalData.username,
});
uni.showToast({
title: "上传中!",
icon: 'loading',
duration: 1000,
});
setTimeout(function () {
that.imglist = []
that.text1 = ''
}, 1000);
}else{
uni.showToast({
title: "请选择图片!",
icon: 'none',
duration: 1000,
})
}
},
viewmemo:function (e) {
uni.navigateTo({
url: "../memo/memo",
})
}
},
}
</script>
<style>
@import "./imgup.css";
</style>
upimg.js 代码:
function uploadimg(data) {
var app = getApp()
var imgurln=[]
var that = this
i = data.i ? data.i : 0,
success = data.success ? data.success : 0,
fail = data.fail ? data.fail : 0;
uni.uploadFile({
url: data.url,
filePath: data.path[i],
name: 'img',
formData: {
user: data.user,
memo: data.text
},
success: (resp) => {
success++;
imgurln = imgurln.concat(app.globalData.url + resp.data);
},
fail: (res) => {
fail++;
console.log('fail:' + i + "fail:" + fail);
},
complete: () => {
i++;
if (i == data.path.length) {
console.log('1>'+app.globalData.url);
console.log('执行完毕');
console.log('成功:' + success + " 失败:" + fail);
} else {
data.i = i;
data.success = success;
data.fail = fail;
that.uploadimg(data);
}
}
});
}
module.exports.uploadimg = uploadimg;
imgup.css 代码:
page{
background-color: rgba(200, 198, 201, 0.527);
}
.pages{
width: 98%;
margin: auto;
overflow: hidden;
}
.images_box{
width: 98%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
background-color: white;
margin: 10rpx;
}
.img-box{
border: 1rpx;
border-style: solid;
border-color: rgba(0, 0, 0, 0.452);
width: 200rpx;
height: 200rpx;
margin-left: 25rpx;
margin-top: 20rpx;
margin-bottom: 20rpx;
position: relative;
}
.img{
width: 100%;
height:100%;
}
.img-delete{
width:50rpx;
height:50rpx;
border-radius:50%;
position:absolute;
right:-20rpx;
top:-20rpx;
}
button{
width: 98%;
margin-top: 20rpx;
background-color: #ffaa00;
}
.img1{
border: 5rpx;
border-style: solid;
border-color: rgba(0, 0, 0, 0.452);
width: 200rpx;
height: 200rpx;
}
.img2{
width: 100%;
height:100%;
}
textarea {
width: 700rpx;
height: 250rpx;
margin-left: 10rpx;
margin-right: 10rpx;
margin-top: 10rpx;
}
.textarea-bg {
background-color: #ffffff;
padding: 10rpx;
font-size: 32rpx;
}
.title-bg {
font-size: 32rpx;
margin-left: 10rpx;
margin-right: 10rpx;
margin-top: 10rpx;
color: #43c729;
}
后端nodejs代码:
var express=require('express')
var app=express()
var router=express.Router()
var multer=require('multer')
var path=require('path')
var image = require("imageinfo")
var mssql =require("mssql")
var config = require('../config.js')
var request = require("request")
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'public/imgtemp/');
},
filename: function (req, file, cb) {
cb(null, Date.now() + "-" + file.originalname);
}
});
var upload = multer({ storage: storage })
var type = upload.single('img')
router.post('/',type,function(req,res,next){
console.log('01>>',req.file);
console.log('02>>',req.body);
res.send(req.file.filename);
mssql.connect(config, function (err) {
if (err) {
console.log('数据库连接失败')
return callback(err);
} else {
var user1 = req.body.user ;
var memo1 = req.body.memo ;
var filename1 = req.file.filename ;
var request = new mssql.Request();
request.query("INSERT INTO wx_bbs (username,memo,filename) VALUES ('"+ user1 +"','"+ memo1 +"','"+ filename1 +"')",function (err, recordsets,returnValue) {
if (err) {
console.log(err);
return
} else {
console.log('执行sql脚本成功');
}
})
};
mssql.end;
});
var images = require("images")
var fs=require('fs')
var name = './public/imgtemp/' + req.file.filename;
var outName = './public/imgup/' + req.file.filename;
images(name)
.size(1000)
.draw(images("./public/png/logo.png"), 10, 10)
.save(outName, {quality:60})
fs.unlink(name,function(err){
if(err){
console.log('删除失败');
return;
}
console.log('原图删除成功');
})
})
module.exports = router;