图片上次
This commit is contained in:
老叶
@@ -1,14 +1,28 @@
|
||||
import request from '@/utils/request';
|
||||
import { setToken } from '@/utils/token-util';
|
||||
//import { setToken } from '@/utils/token-util';
|
||||
|
||||
/**
|
||||
* 上传图片
|
||||
*/
|
||||
export async function upload(data) {
|
||||
const res = await request.post('/upload', data);
|
||||
if (res.data.code === 0) {
|
||||
setToken(res.data.data.access_token, data.remember);
|
||||
return res.data.message;
|
||||
}
|
||||
return Promise.reject(new Error(res.data.message));
|
||||
return res;
|
||||
// if (res.data.code === 0) {
|
||||
// //setToken(res.data.data.access_token, data.remember);
|
||||
// return res.data.message;
|
||||
// }
|
||||
// return Promise.reject(new Error(res.data.message));
|
||||
// request({
|
||||
// url: '/upload',
|
||||
// method: 'post',
|
||||
// data: data,
|
||||
// onUploadProgress: (e) => {
|
||||
// if (e.lengthComputable) {
|
||||
// //item.progress = e.loaded / e.total* 100;
|
||||
// }
|
||||
// }
|
||||
// }).then((res) => {
|
||||
// console.log(1111);
|
||||
// console.log(res);
|
||||
// });
|
||||
}
|
||||
|
||||
@@ -1,14 +1,21 @@
|
||||
<template>
|
||||
<div>
|
||||
<ele-image-upload v-model="images" @upload="onUpload" />
|
||||
<el-button @click="onSubmit">提交</el-button>
|
||||
<ele-image-upload
|
||||
v-model="images"
|
||||
:limit="1"
|
||||
:drag="true"
|
||||
:multiple="false"
|
||||
:upload-handler="uploadHandler"
|
||||
@upload="onUpload"
|
||||
/>
|
||||
<el-button @click="onSubmit">提交的时候提起URL</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EleImageUpload from 'ele-admin/es/ele-image-upload';
|
||||
import { upload } from '@/api/test/upload';
|
||||
// import request from '@/utils/request';
|
||||
// import { upload } from '@/api/test/upload';
|
||||
import request from '@/utils/request';
|
||||
|
||||
export default {
|
||||
components: { EleImageUpload },
|
||||
@@ -18,48 +25,83 @@
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/* 上传事件 */
|
||||
uploadHandler(file) {
|
||||
const item = {
|
||||
file,
|
||||
uid: file.uid,
|
||||
name: file.name,
|
||||
progress: 0,
|
||||
status: null
|
||||
};
|
||||
if (!file.type.startsWith('image')) {
|
||||
this.$message.error('只能选择图片');
|
||||
return;
|
||||
}
|
||||
if (file.size / 1024 / 1024 > 2) {
|
||||
this.$message.error('大小不能超过 2MB');
|
||||
return;
|
||||
}
|
||||
item.url = window.URL.createObjectURL(file);
|
||||
// 关键就是这里要自己 push 添加数据而不是靠 v-modal 自动更新
|
||||
this.images.push(item);
|
||||
this.onUpload(item);
|
||||
},
|
||||
/* 上传 item */
|
||||
onUpload(item) {
|
||||
// item 包含的字段参考前面说明
|
||||
console.log('item:', item);
|
||||
item.status = 'uploading';
|
||||
const formData = new FormData();
|
||||
console.log(item.file);
|
||||
formData.append('file', item.file);
|
||||
console.log(formData);
|
||||
upload(formData)
|
||||
request({
|
||||
url: '/upload',
|
||||
method: 'post',
|
||||
data: formData,
|
||||
onUploadProgress: (e) => {
|
||||
if (e.lengthComputable) {
|
||||
item.progress = (e.loaded / e.total) * 100;
|
||||
}
|
||||
}
|
||||
})
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
if (res.data.code === 0) {
|
||||
item.status = 'done';
|
||||
item.url = res.data.data.full_url;
|
||||
item.fileUrl = res.data.data.url;
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
.catch(() => {
|
||||
item.status = 'exception';
|
||||
});
|
||||
// request({
|
||||
// url: '/file/upload',
|
||||
// method: 'post',
|
||||
// data: formData,
|
||||
// onUploadProgress: (e) => { // 文件上传进度回调
|
||||
// if (e.lengthComputable) {
|
||||
// item.progress = e.loaded / e.total * 100;
|
||||
// }
|
||||
// }
|
||||
// }).then((res) => {
|
||||
// if(res.data.code === 0) {
|
||||
// item.status = 'done';
|
||||
// item.url = res.data.data.url;
|
||||
// // 如果你上传的不是图片格式, 建议将 url 字段作为缩略图, 再添加其它字段作为最后提交数据
|
||||
// //item.url = res.data.data.thumbnail; // 也可以不赋值 url 字段, 默认会显示为一个文件图标
|
||||
// item.fileUrl = res.data.data.url;
|
||||
// }
|
||||
// }).catch((e) => {
|
||||
// item.status = 'exception';
|
||||
// });
|
||||
},
|
||||
// /* 上传 item */
|
||||
// onUpload(item) {
|
||||
// const loading = this.$messageLoading('上传中..');
|
||||
// const formData = new FormData();
|
||||
// formData.append('file', item.file);
|
||||
// upload(formData)
|
||||
// .then((res) => {
|
||||
// loading.close();
|
||||
// console.log(res);
|
||||
// if (res.data.code === 0) {
|
||||
// item.status = 'done';
|
||||
// item.url = res.data.data.full_url;
|
||||
// item.fileUrl = res.data.data.url;
|
||||
// } else {
|
||||
// item.status = 'exception';
|
||||
// }
|
||||
// console.log(item);
|
||||
// console.log('images');
|
||||
// console.log(this.images);
|
||||
// })
|
||||
// .catch(() => {
|
||||
// console.log(111);
|
||||
// loading.close();
|
||||
// });
|
||||
// },
|
||||
onSubmit() {
|
||||
// 这里你可以获取上传后的数据与其它表单数据一起提交
|
||||
//const urls = this.images.map(d => d.url);
|
||||
// 如果你是将 url 作为缩略图, 其它字段作为文件 url 可取你自定义的字段
|
||||
//const urls = this.images.map(d => d.fileUrl);
|
||||
//console.log('urls:', urls);
|
||||
const urls = this.images.map((d) => d.fileUrl);
|
||||
console.log('urls:', urls);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user