本文介绍了某视频剪辑软件节点实现图片上传及预览的示例方法，分享给大家，具体如下：

先上效果图

上代码

超文本标记语言部分主要是借助了框架的样式

模板div myheader :title=' '发布动态I class=' icon font icon-范慧1 left ' slot=' left ' @ click=' go back '/I/我的标题div class=' upload ' div v-if=' UserInfo ._id！-图片上传-div class=' weui-gallery ' id=' gallery ' span class=' weui-gallery _ _ img ' id=' gallery img '/span div class=' weui-gallery _ _ opr ' a href=' JavaScript : ' rel='外部无跟随' class=' weui-gallery _ _ del ' I class=' weui-icon-delete weui-icon _ gallery-delete '/I/a/div/div class=' weui-cells weui-cells _ form ' div class=' weui你想说啥行=' 3 '/textarea/div/div class=' weui-cell ' div class=' weui-cell _ _ BD ' div class=' weui-uploader ' div class=' weui-uploader _ _ BD ' ul class=' weui-uploader _ _ files ' id=' uploader files ' Li ref=' files ' class=' weui-uploader _ _ file ' v-for='(image，index)in images ' 3360 key=' index ' 3: style=' '背景图像发送/a /div解锁v-else/解锁/div/模板重点部分在于

ul class=' weui-uploader _ _ files ' id=' uploader files ' Li ref=' files ' class=' weui-uploader _ _ file ' v-for='(image，index)in images ' : key=' index ' : style=' background image 3360 URl(' image ')' span @ click=' deleteimg(index)' class=' x '/span/Li/uldiv-show='！这个$refs.files||this .参考文献。文件。length maxCount ' class=' weui-uploader _ _ input-box ' input @ change=' change ' id=' uploadereinput ' class=' weui-uploader _ _ input ' type=' file ' multiple accept=' image/*/div通过@change='change '监听图片的上传，把图片转成base64后（后面会讲怎么转base64)将base64的地址加入到形象数组，通过v-for='(图像，索引)在图像中'把要上传的图片在页面中显示出来，即达到了预览的效果

射流研究…部分

数据部分

data() { return { content: ' '，//分享动态的文字内容maxSize: 10240000/2，//图片的最大大小maxCount: 8，//最大数量文件arr :[]，//保存要上传图片的数组images: []//转成base64后的图片的数组} }删除方法

deleteimg(索引){这个。filestar。拼接(索引，1);this.images.splice(索引，1);}更改方法

更改(e){让文件=e . target。文件；//如果没有选中文件，直接返回if(文件。length===0){ return；}如果(这个。图像。长度文件。长度这个。maxcount){ Toast('最多只能上传' this.maxCount '张图片!');返回；}让读者；让文件；让图像=这个。图像；用于(设I=0；我。文件。长度；I){ file=files[I]；这个。FileArr。推送(文件);reader=new FileReader()；if(文件。大小自我。MaxSize){ Toast('图片太大，不允许上传!');继续；}读者。onload=(e)={ let img=new Image()；img。onload=function(){ let canvas=document。create element(' canvas ')；让CTX=画布。get context(' 2d ')；让w=img.width设h=img.height//设置帆布的宽度和高度帆布。宽度=w；帆布。高度=h；ctx.drawImage(img，0，0，w，h)；让base64=canvas。todaytaul(' image/png ')；图像。push(base 64)；};img。src=e .目标。结果；};reader.readAsDataURL(文件);} }放方法把文件arrive）中保存的图片通过爱可信发送到后端，注意要设置头球信息

put() { Indicator.open('发布中.');让自我=这个；让内容=this . content let param=new FormData()；param.append('content '，content)；param.append('username '，这个。用户信息。_ id)；这个。文件逮捕。foreach((文件)={ param。追加('文件2 '，文件)；});自我。axios。post('/uploadFile/uploadFile '，param，{ header RS : { ' Content-Type ' : ' application/x-www-form-URL编码' } }).然后(函数(结果){控制台。日志(结果。数据)；自我$路由器。push({ path : '/home ' })；指示器。close()；Toast(result.data.msg) }) }后端通过multer模块保存传输的图片，再把保存下来的图片发送到阿里云oss(这个可以根据自己的使用情况变化)

让文件路径；让文件名小存储=多。磁盘存储({目标：函数(请求、文件、cb) {//计算图片存放地址cb(null，' ./public/img ')；}，文件名：函数(请求、文件、cb) {//图片文件名fileName=日期。now()“_”parsent(数学。random()* 1000000)" .png '；文件路径='。/public/img/' FIlename；cb(null，FIlename)} })；让上传=多次({storage: Storage}).any()；//文件2表示图片上传文件的keyrouter.post('/uploadFile '，函数(req，res，next) { upload(req，res，function(err){ let content=req。尸体。内容| | '；让用户名=请求。尸体。用户名；让imgs=[]；//要保存到数据库的图片地址数组if(err){ return RES . end(err)；} if(req。文件。length===0){ new Pyq({ writer : username，content: content }).保存()。然后((结果)={ res.json({ result: result，code: '0 '，msg: '上传成功' });})}/*客户端。删除(' public/img/1。' png '，函数(err){ console。log(err)})；*/让I=0；req.files.forEach((item，index)={ let filePath=` ./public/img/$ { item。filename } `；put(item.filename，filePath)，(result)={ imgs。推送(结果。网址)；我；if(I====req。文件。长度){//forEach循环是同步的，但上传图片是异步的，所以用一个我去标记图片是否全部上传成功//这时才把数据保存到数据库新Pyq({ content: content，writer: username，pimg: imgs }).保存()。然后(()={ res.json({ code: '0 '，msg: '发布成功' });}) } }) }) })});开源代码库地址

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。