微信小程序上传图片及文件（上传、下载、删除及预览）

微信小程序上传附件

上传文件及图片 下载，预览、删除

附言：
如果使用wx.request时，微信会限制wx.request无法post提交上传文件
1.是微信小程序没有提供fromdata对象，（也就是无法把表单的内容封装成fromdata数据）
2.微信小程序也没有file的表单元素。（应该腾讯不想我们通过wx.request上传文件，让我们用wx.upload去每次一个一个的上传）
其实也并非wx.request就无法上传文件，只要按照multipart/form-data提交数据的格式封装数据即可（说白了就是字符串拼接）
网址链接：https://www.cnblogs.com/fps2tao/p/14223497.html

自定义封装组件 哪儿用哪儿调用即可

下面是使用微信官方自带的上传函数开发

wxml代码

<!-- <view>上传文件（我是子组件）</view> -->
<view class="fileImgAll">
    <view class="imginfo"
        style="border-bottom:{
       {
       attachmentImgFile&&attachmentImgFile.length!==0?'1px dashed #999':''}};display: {
       {
       fileDetail?'none':'block'}};">
        <!-- 点击上传文件按钮 -->
        <view bindtap="uploadAction" class="fileLeft">
            <i class="iconfont icon-weixin" style="color: rgb(13, 175, 75); font-size: larger;"></i>
            上传文件
        </view>
        <!-- 点击上传图片按钮 -->
        <view bindtap="uploadup" class="fileRight">
            <i class="iconfont .icon-xiangce" style="color: rgb(148, 24, 206);  font-size: larger;"></i>
            上传图片
        </view>
    </view>
    <view class="allStyle">
        <!-- 图片  文件  渲染  展示 -->
        <!-- 单据 展示 根据 渲染 数组的不同 -->
        <view wx:if="{
    {orderShowUp.id&&orderAttachment==='order_attachment'}}" wx:for="{
    {orderShowUp.attachment}}"
            wx:key="index" class="fileImg">
            <!-- 上传文件在此处渲染 -->
            <view class="fileAll" wx:if="{
    {item.mime_type!=='image/'+item.extension}}">
                <i bindtap="uploadDown" data-index="{
    {index}}" class="iconfont .icon-wenjian1"
                    style="color: rgb(14 153 234);  font-size: x-large;"></i>
                <i wx:if="{
    {fileDetail===false}}" bindtap="setDelArr" class='fileTips' data-index="{
    {index}}">X</i>
            </view>
            <!-- 如果上传相册是 gif类型 或者后台没返回 thumb文件流  在此处展示文件样式 但点击下载后 可直接预览-->
            <view class="fileAll" wx:if="{
    {item.mime_type==='image/'+item.extension&&!item.thumb}}">
                <i bindtap="listenerButtonPreviewImage" data-index="{
    {index}}" class="iconfont .icon-wenjian1"
                    style="color: rgb(14 153 234);  font-size: x-large;"></i>
                <!-- <i wx:if="{
   {fileDetail===false}}" bindtap="setDelArr" class='fileTips' data-index="{
   {index}}">X</i> -->
            </view>
            <!-- 上传图片 在此处渲染 -->
            <view class="imgStyle" wx:if="{
    {item.mime_type==='image/'+item.extension}}">
                <block>
                    <image mode='aspectFit' src="data:image/png;base64,{
    {item.thumb}}"
                        bindtap="listenerButtonPreviewImage" style="width: 100%;height: 100%;  border-radius: 10%;"
                        data-index="{
    {index}}" />
                    <i wx:if="{
    {fileDetail===false}}" bindtap="setDelArr" class='fileTips' data-index="{
    {index}}">X</i>
                </block>
            </view>
        </view>
    </view>
</view>

js 代码

// components/uploaddown/index.js
const app = getApp()
Component({
   
    /**
     * 组件的属性列表
     */
    properties: {
   
        count: {
    // 最多选择图片的张数
            type: Number,
            value: 9,
        },
        thumb: {
   
            type: Boolean,
            value: ''
        },
        orderShow: {
   
            type: Object,
        },
        attachment: {
   
            type: Array,
        },
        orderAttachment: {
   
            type: String,
        },
        fileDetail: {
   
            type: Boolean,
        }
    },

    /**
     * 组件的初始数据
     */
    data: {
   
        fileList: [], // 需要上传的图片列表
        isAct: false,
        isSava: false,
        files: [],
        loading: false,
        storeList: [],
        imgModalBox: {
   
            visible: false,
            previewImage: '',
            imgWidth: 0,
            imgHeight: 0,
            original: false, // 查看原图
        },
        tempFilePaths: [], // 上传的附件 图片
        storeName: '', // 下载时需要传给路由的文件字段
        deleteFilePathName: '', // 获取删除图片路径名
        tempUnImgList: [], // 上传的文件列表
        itemFilePathName: '', // 获取上传时文件路径名
        itemFileUrlName: '', // 获取上传后 后端返回的文件路径名
        fileNamePath: '', // 截取数组的path
        fileData: [], // 上传文件后获取返回的结果  文件
        markFile: '', // 删除文件按钮  文件
        // deleFileList: [], // 删除时传给后台数组  文件
        allImgList: [],
        imageShow: false, // 图片上传完成是  渲染图片
        filesShow: false, // 文件上传成功后显示
        orderShowUp: {
   },
        titleImg: '',
        attachmentImgFile: [], // 区分单据和病例
        detailUrl: '',
    },

    attached() {
   
        const {
   
            orderShow,
            orderAttachment,
            fileDetail,
        } = this.properties;
        this.setData({
   
            orderShowUp: orderShow,
        })
        if (orderAttachment === "order_attachment") {
   
            this.setData({
   
                attachmentImgFile: orderShow.attachment
            })