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

微信小程序上传附件

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

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

wxml代码

<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}}">Xi>
            view>
            
            <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>
                
            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}}">Xi>
                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
            })
        } else if (orderAttachment === "order_patient_attachment") {
   
            this.setData(