|
@@ -3,16 +3,13 @@
|
|
<el-upload
|
|
<el-upload
|
|
v-loading.fullscreen.lock="mark"
|
|
v-loading.fullscreen.lock="mark"
|
|
ref="upload"
|
|
ref="upload"
|
|
- :action="newUrl"
|
|
|
|
|
|
+ action=""
|
|
:headers="myHeaders"
|
|
:headers="myHeaders"
|
|
list-type="picture-card"
|
|
list-type="picture-card"
|
|
:multiple="true"
|
|
:multiple="true"
|
|
:auto-upload="false"
|
|
:auto-upload="false"
|
|
:limit="limit"
|
|
:limit="limit"
|
|
- :file-list="imgList"
|
|
|
|
- :on-success="handleAvatarSuccess"
|
|
|
|
- :on-error="handleError"
|
|
|
|
- :on-progress="onProgress"
|
|
|
|
|
|
+ :on-change="handleChange"
|
|
:disabled="limit <= value.length"
|
|
:disabled="limit <= value.length"
|
|
>
|
|
>
|
|
<i slot="default" class="el-icon-plus" />
|
|
<i slot="default" class="el-icon-plus" />
|
|
@@ -25,31 +22,21 @@
|
|
>
|
|
>
|
|
<i class="el-icon-zoom-in" />
|
|
<i class="el-icon-zoom-in" />
|
|
</span>
|
|
</span>
|
|
- <!-- <span
|
|
|
|
- v-if="!disabled"
|
|
|
|
- class="el-upload-list__item-delete"
|
|
|
|
- @click="handleDownload(file)"
|
|
|
|
- >
|
|
|
|
- <i class="el-icon-download" />
|
|
|
|
- </span> -->
|
|
|
|
- <span
|
|
|
|
- v-if="!disabled"
|
|
|
|
- class="el-upload-list__item-delete"
|
|
|
|
- @click="handleRemove(file)"
|
|
|
|
- >
|
|
|
|
- <i class="el-icon-delete" />
|
|
|
|
- </span>
|
|
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</el-upload>
|
|
</el-upload>
|
|
- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
|
|
|
|
|
|
+ <el-button
|
|
|
|
+ class="mt-40"
|
|
|
|
+ style="margin-left: 10px;"
|
|
|
|
+ size="small"
|
|
|
|
+ type="success"
|
|
|
|
+ @click="submitUpload"
|
|
|
|
+ >上传到服务器</el-button
|
|
|
|
+ >
|
|
|
|
|
|
<el-dialog :visible.sync="dialogVisible" :modal="false">
|
|
<el-dialog :visible.sync="dialogVisible" :modal="false">
|
|
<img width="100%" :src="dialogImageUrl" alt="" />
|
|
<img width="100%" :src="dialogImageUrl" alt="" />
|
|
</el-dialog>
|
|
</el-dialog>
|
|
- <!-- <el-button type="primary" >
|
|
|
|
- 指令方式
|
|
|
|
- </el-button> -->
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
@@ -72,9 +59,13 @@ export default {
|
|
type: String,
|
|
type: String,
|
|
default: ''
|
|
default: ''
|
|
},
|
|
},
|
|
- uploadUrl: {
|
|
|
|
- type: String,
|
|
|
|
- default: ''
|
|
|
|
|
|
+ paramsData: {
|
|
|
|
+ type: Object,
|
|
|
|
+ default: () => ({})
|
|
|
|
+ },
|
|
|
|
+ api: {
|
|
|
|
+ type: Function,
|
|
|
|
+ default: () => {}
|
|
}
|
|
}
|
|
},
|
|
},
|
|
data() {
|
|
data() {
|
|
@@ -88,7 +79,7 @@ export default {
|
|
authorization: 'Bearer swagger-ui',
|
|
authorization: 'Bearer swagger-ui',
|
|
token: getToken()
|
|
token: getToken()
|
|
},
|
|
},
|
|
- imgList: this.value,
|
|
|
|
|
|
+ imgList: [],
|
|
tmp: []
|
|
tmp: []
|
|
};
|
|
};
|
|
},
|
|
},
|
|
@@ -109,67 +100,48 @@ export default {
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
|
|
- watch: {
|
|
|
|
- value: {
|
|
|
|
- handler(val) {
|
|
|
|
- // if (this.imgList.length < val.length) {
|
|
|
|
- this.imgList = val;
|
|
|
|
- console.log(this.imgList);
|
|
|
|
- // }
|
|
|
|
- },
|
|
|
|
- immediate: true
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
|
|
+ // watch: {
|
|
|
|
+ // value: {
|
|
|
|
+ // handler(val) {
|
|
|
|
+ // // if (this.imgList.length < val.length) {
|
|
|
|
+ // this.imgList = val;
|
|
|
|
+ // console.log(this.imgList);
|
|
|
|
+ // // }
|
|
|
|
+ // },
|
|
|
|
+ // immediate: true
|
|
|
|
+ // }
|
|
|
|
+ // },
|
|
|
|
|
|
methods: {
|
|
methods: {
|
|
- submitUpload() {
|
|
|
|
- this.$refs.upload.submit();
|
|
|
|
|
|
+ handleChange(fileList) {
|
|
|
|
+ this.imgList.push(fileList);
|
|
},
|
|
},
|
|
- onProgress() {
|
|
|
|
- // this.moduleark = true;
|
|
|
|
- },
|
|
|
|
- handleError() {
|
|
|
|
- this.mark = false;
|
|
|
|
- this.$error('上传失败,请稍后重试...');
|
|
|
|
- },
|
|
|
|
- handleAvatarSuccess(res, file, fileList) {
|
|
|
|
- if (file.response.code !== 200) {
|
|
|
|
- this.$refs.upload.clearFiles();
|
|
|
|
- this.$message.error('上传失败,请稍后再试~');
|
|
|
|
- this.$emit('input', []);
|
|
|
|
- return false;
|
|
|
|
|
|
+ submitUpload() {
|
|
|
|
+ this.mark = true;
|
|
|
|
+ let form = new FormData();
|
|
|
|
+ for (let key in this.paramsData) {
|
|
|
|
+ form.append(key, this.paramsData[key]);
|
|
}
|
|
}
|
|
- const result =
|
|
|
|
- fileList.length > 0
|
|
|
|
- ? fileList.map(x => ({
|
|
|
|
- name: x.response ? x.response.data.filename : x.name,
|
|
|
|
- url: x.response ? x.response.data.fullPath : x.url,
|
|
|
|
- size: x.response ? x.response.data.size : x.size
|
|
|
|
- }))
|
|
|
|
- : [];
|
|
|
|
- this.$nextTick(() => {
|
|
|
|
- this.$emit('input', result);
|
|
|
|
- this.mark = false;
|
|
|
|
|
|
+ console.log(this.imgList);
|
|
|
|
+ this.imgList.forEach(file => {
|
|
|
|
+ form.append('file', file.raw);
|
|
});
|
|
});
|
|
- },
|
|
|
|
- // handleChange(file, fileList) {
|
|
|
|
- // if (file.response) {
|
|
|
|
- // // this.imgList = this.tmp
|
|
|
|
- // }
|
|
|
|
- // console.log(file)
|
|
|
|
- // console.log(fileList)
|
|
|
|
- // // const result = fileList.length > 0 ? fileList.map(x => ({
|
|
|
|
- // // name: x.name,
|
|
|
|
- // // url: x.response.data.path
|
|
|
|
- // // // url: x.url
|
|
|
|
- // // })) : []
|
|
|
|
- // // this.imgList = result
|
|
|
|
- // // const result = this.tmp
|
|
|
|
- // // this.imgList = JSON.parse(JSON.stringify(this.tmp))
|
|
|
|
- // },
|
|
|
|
- handleRemove(file, fileList) {
|
|
|
|
- const result = this.imgList.filter(x => x.name !== file.name);
|
|
|
|
- this.$emit('input', result);
|
|
|
|
|
|
+ // this.mark = false;
|
|
|
|
+ this.api(form)
|
|
|
|
+ .then(({ success }) => {
|
|
|
|
+ if (success) {
|
|
|
|
+ this.mark = false;
|
|
|
|
+ this.$emit('finish');
|
|
|
|
+ } else {
|
|
|
|
+ this.$error('上传失败,请稍后重试...');
|
|
|
|
+ this.mark = false;
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ .catch(err => {
|
|
|
|
+ console.error(err);
|
|
|
|
+ this.$error('上传失败,请稍后重试...');
|
|
|
|
+ this.mark = false;
|
|
|
|
+ });
|
|
},
|
|
},
|
|
handlePictureCardPreview(file) {
|
|
handlePictureCardPreview(file) {
|
|
this.dialogImageUrl = file.url;
|
|
this.dialogImageUrl = file.url;
|