Browse Source

feat(uploader): 添加ready状态对应的UI展示 (#837)

* fix(uploader): Upload quantity limit

* fix(uploader): 修复小程序端传图后报错问题

* feat(uploader): 添加ready状态对应的UI展示

Co-authored-by: 无始 <wushi@yinge.tech>
AsherSun 4 years ago
parent
commit
6bf1e7365b

+ 5 - 1
src/packages/__VUE/uploader/index.taro.vue

@@ -9,7 +9,10 @@
 
     <view class="nut-uploader__preview" :class="[listType]" v-for="(item, index) in fileList" :key="item.uid">
       <view class="nut-uploader__preview-img" v-if="listType == 'picture' && !$slots.default">
-        <view class="nut-uploader__preview__progress" v-if="item.status != 'success'">
+        <view class="nut-uploader__preview__progress" v-if="item.status == 'ready'">
+          <view class="nut-uploader__preview__progress__msg">{{ item.message }}</view>
+        </view>
+        <view class="nut-uploader__preview__progress" v-else-if="item.status != 'success'">
           <nut-icon color="#fff" :name="item.status == 'error' ? 'failure' : 'loading'"></nut-icon>
           <view class="nut-uploader__preview__progress__msg">{{ item.message }}</view>
         </view>
@@ -243,6 +246,7 @@ export default create({
         fileItem.path = file.path;
         fileItem.name = file.path;
         fileItem.status = 'ready';
+        fileItem.message = '等待上传';
         fileItem.type = fileType;
         if (props.isPreview) {
           fileItem.url = file.path;

+ 5 - 1
src/packages/__VUE/uploader/index.vue

@@ -29,7 +29,10 @@
 
     <view class="nut-uploader__preview" :class="[listType]" v-for="(item, index) in fileList" :key="item.uid">
       <view class="nut-uploader__preview-img" v-if="listType == 'picture' && !$slots.default">
-        <view class="nut-uploader__preview__progress" v-if="item.status != 'success'">
+        <view class="nut-uploader__preview__progress" v-if="item.status == 'ready'">
+          <view class="nut-uploader__preview__progress__msg">{{ item.message }}</view>
+        </view>
+        <view class="nut-uploader__preview__progress" v-else-if="item.status != 'success'">
           <nut-icon color="#fff" :name="item.status == 'error' ? 'failure' : 'loading'"></nut-icon>
           <view class="nut-uploader__preview__progress__msg">{{ item.message }}</view>
         </view>
@@ -267,6 +270,7 @@ export default create({
         fileItem.status = 'ready';
         fileItem.type = file.type;
         fileItem.formData = formData;
+        fileItem.message = '等待上传';
         executeUpload(fileItem, index);
 
         if (props.isPreview && file.type.includes('image')) {