微信小程序文件、pdf、图片上传、回显、预览

甲方爸爸给的需求，就是你进步的源泉。

实现的功能：小程序doc、pdf、图片等的上传、回显、预览

使用的工具

基于uniapp开发 上传功能主要使用：uni-file-picker 插件实现

1. 将插件包下载到项目中

等待安装完毕，就可以直接使用。

2. 图片上传、回显

html
<uni-file-picker :action="action" limit="1" file-extname="png,jpg" title="最多选择1张图片
(png/jpg格式)" @select="select" @fail="fail"

:value="{ 'name':form.name,'extname':'png,jpg','url':form.url}">

</uni-file-picker>

• action : 绑定上传的url
• limit : 限制上传的数量（最大值9)
• file-extname ：限制类型 此处类型为图片"png,jpg"
• title ：提示说明（自定义）
• form ：必须是个Object
• value ：三个属性必填，否则影响组件显示；用于回显

[
    {
        "name":"回显文件的名称",
        "extname":"回显文件的类型",
        "url":"回显文件的地址",
        // ...
    }
]

• @select 方法：选择文件后触发 选择文件后就调用上传的API ：uni.uploadFile中url/name/filePath都是必填

select(e) {
    uni.uploadFile({
            url: '绑定上传的url',
            name: 'file',
            filePath: e.tempFilePaths[0],
            success: (uploadFileRes) => {
                    let data = JSON.parse(uploadFileRes.data);//uploadFileRes.data是JSON格式，故转化为对象进行赋值
                    this.form = {
                            name: e.tempFiles[0].name,//文件名称
                            url: data.data[0],//文件路径
                    }
            }
    });
},

3. 文件的上传及预览

<uni-file-picker :action="action" limit="1" file-mediatype="all" title="最多选择1个文件"
@select="select" @fail="fail"
:value="{ 'name':form2.name,'extname':'txt','url':form2.url}">
</uni-file-picker>

<view style="padding: 30rpx;" @click="downLoad()">预览</view>

• file-mediatype : 'all'值代表接收各种类型的文件

其他与上述方法一致

预览

downLoad() {
    wx.downloadFile({
        url: this.form2.url,
        success(res) {
       // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
            if (res.statusCode === 200) {
                switch (res.header['Content-Type']) {
                //图片
                    case "image/png" || "image/jpeg":
                    wx.previewMedia({
                        sources: [{
                            url: res.tempFilePath
                        }]
                    })
                    break;
                    default:
                    //打开文件
                    wx.openDocument({ 
                        filePath: res.tempFilePath,
                        success(res) {
                            console.log(res, "看");
                        }
                    })
                }
            }
        }
    })
},

结束 ! 如有误，请不吝指正 ！ 感谢观看~
欢迎评论 ~ 欢迎点赞 ~ 无限欢迎 ~