前端?
html
<!-- 富文本 -->
<view class="container">
<editor id="editor" ref="editor" :placeholder=placeholder @input="onInput" @ready="onEditorReady">
</editor>
</view>
<view class="addForum_image" >
<image src="https://img.icons8.com/officel/80/add-image.png" alt="picture" mode='aspectFit' @tap="insertImage"/>
<!-- <image src="https://img.icons8.com/ultraviolet/80/add-image.png" alt="picture" mode='aspectFit'/> -->
</view>js
// 上傳圖片到服務(wù)器
insertImage() {
var that = this
uni.chooseImage({
count: 1, //默認(rèn)9
sizeType: ['original', 'compressed'], //可以指定是原圖還是壓縮圖，默認(rèn)二者都有
sourceType: ['album'], //從相冊(cè)選擇
success: function (res) {
console.log(JSON.stringify(res.tempFilePaths));
const tempFilePaths = res.tempFilePaths
uni.uploadFile({
url: httpUrl+'/aydoorumomg',
filePath: tempFilePaths[0],
name: 'file',
success(uploadFileRes) {
const data = JSON.parse(uploadFileRes.data).location
console.log(data);
// 上傳成功,獲取服務(wù)器返回的圖片路徑和名稱(chēng)
// 將圖片信息存儲(chǔ)至數(shù)據(jù)庫(kù)或文件
that.editorCtx.insertImage({
src: data,
})
}
})
}
});
},
node后端
//上傳論壇帖子圖片
adoporomIog(req,res){
console.log('上傳文件');
console.log(req.file);
const file = req.file
const fileName = `${Date.now()}-${file.filename}.${file.originalname.slice(file.originalname.lastIndexOf('.') + 1)}`
const uploadFile = fs.createWriteStream(`./public/images/forumimages/${fileName}`,{
highWaterMark:1024*1024*50
})
req.socket.setTimeout(120000)
req.setTimeout(120000)
const fileStream = fs.createReadStream(file.path)
let uploadComplete = false
fileStream.on('error', err => {
uploadFile.close()
})
fileStream.pipe(uploadFile).on('finish', () => {
uploadComplete = true
uploadFile.close()
})
res.json({
location: `https://gothordoeaos.com:9990/images/forumimages/${fileName}`
})
},效果? 小程序端
?
?
后臺(tái)
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-512279.html
?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-512279.html
到了這里，關(guān)于微信小程序 editor圖片上傳到node服務(wù)器并展示在當(dāng)前頁(yè)面的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![微信小程序獲取服務(wù)器圖片[渲染層網(wǎng)絡(luò)層錯(cuò)誤]404](https://imgs.yssmx.com/Uploads/2024/02/501915-1.png)
