uniapp原生图片上传组件

uniapp原生图片上传组件

需求：文件上传速度快，但是拉取图片的速度慢，前台要实现了断点续存功能。

优化：前台在上传文件时会获得一个本地的临时路径，在填写人第一次上传表单并且没有退出时使用本地临时路径展示给用户查看；若用户退出了表单填写，数据会放松给后台存储到数据库，后端返回一个缩略图，前端默认展示后端给的缩略图，在用户预览图片时再去拉取后端的高清图，实现图片上传优化。

1、模板

<view class="cont">
    <view class="title">
        <view class="label-name">
            <text>相关图片：</text>
        </view>
    </view>
    <view class="info">
        <view v-if="上传操作">
            <view class="img_box">
                <view
                    v-for="(item, index) in imageUrlFiles"
                    :key="index"
                >
                    <view class="images-box">
                        <image
                            class="img"
                            :src="item.imgUrl"
                            mode="aspectFill"
                            @click="previewImg(index,$event)"
                        ></image>
                        <view class="img-del" @click="imgDelete(item,index,$event)">
                            <u-icon name="close" color="#999" size="18"></u-icon>
                        </view>
                        <u-loading-icon class="loading" text="上传中" color="#5cadff" textColor="#5cadff" vertical textSize="18" :show="item.isShowUploadingImg"></u-loading