|
|
@@ -5,14 +5,119 @@
|
|
|
-->
|
|
|
|
|
|
<template>
|
|
|
- <view> 图片 </view>
|
|
|
+ <u-upload
|
|
|
+ :fileList="fileList1"
|
|
|
+ @afterRead="afterRead"
|
|
|
+ @delete="deletePic"
|
|
|
+ :multiple="multiple"
|
|
|
+ :maxCount="maxCount"
|
|
|
+ :accept="accept"
|
|
|
+ :deletable="deletable"
|
|
|
+ :previewFullImage="previewFullImage"
|
|
|
+ >
|
|
|
+ <view class="upload-img direction fl-justify-center">
|
|
|
+ <u--image
|
|
|
+ src="/static/components/upload-img.png"
|
|
|
+ width="48rpx"
|
|
|
+ height="48rpx"
|
|
|
+ ></u--image>
|
|
|
+ <view class="f-s-28 u-m-t-16" style="color: #9fa0a6">{{ text }}</view>
|
|
|
+ </view>
|
|
|
+ </u-upload>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
name: 'upload-img',
|
|
|
+ props: {
|
|
|
+ text: {
|
|
|
+ type: String,
|
|
|
+ default: '上传图片',
|
|
|
+ },
|
|
|
+ accept: {
|
|
|
+ type: String,
|
|
|
+ default: 'image', //all | media | image | file | video
|
|
|
+ },
|
|
|
+ maxCount: {
|
|
|
+ type: String | Number,
|
|
|
+ default: 1,
|
|
|
+ },
|
|
|
+ previewFullImage: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true,
|
|
|
+ },
|
|
|
+ multiple: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ deletable: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ fileList1: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 删除图片
|
|
|
+ deletePic(event) {
|
|
|
+ this[`fileList${event.name}`].splice(event.index, 1);
|
|
|
+ },
|
|
|
+ // 新增图片
|
|
|
+ async afterRead(event) {
|
|
|
+ // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
|
|
+ let lists = [].concat(event.file);
|
|
|
+ let fileListLen = this[`fileList${event.name}`].length;
|
|
|
+ lists.map(item => {
|
|
|
+ this[`fileList${event.name}`].push({
|
|
|
+ ...item,
|
|
|
+ status: 'uploading',
|
|
|
+ message: '上传中',
|
|
|
+ });
|
|
|
+ });
|
|
|
+ for (let i = 0; i < lists.length; i++) {
|
|
|
+ const result = await this.uploadFilePromise(lists[i].url);
|
|
|
+ let item = this[`fileList${event.name}`][fileListLen];
|
|
|
+ this[`fileList${event.name}`].splice(
|
|
|
+ fileListLen,
|
|
|
+ 1,
|
|
|
+ Object.assign(item, {
|
|
|
+ status: 'success',
|
|
|
+ message: '',
|
|
|
+ url: result,
|
|
|
+ }),
|
|
|
+ );
|
|
|
+ fileListLen++;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ uploadFilePromise(url) {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ let a = uni.uploadFile({
|
|
|
+ url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
|
|
|
+ filePath: url,
|
|
|
+ name: 'file',
|
|
|
+ formData: {
|
|
|
+ user: 'test',
|
|
|
+ },
|
|
|
+ success: res => {
|
|
|
+ setTimeout(() => {
|
|
|
+ resolve(res.data.data);
|
|
|
+ }, 1000);
|
|
|
+ },
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+.upload-img {
|
|
|
+ width: 214rpx;
|
|
|
+ height: 210rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ border: 2rpx dashed #e6e6e6;
|
|
|
+}
|
|
|
</style>
|
