文件上传修改
This commit is contained in:
HuskyOo
parent
828dcd0510
commit
c38bdc3ffe
|
|
@ -4,8 +4,8 @@ ENV = 'development'
|
|||
# base api
|
||||
#VUE_APP_BASE_API = '/dev-api'
|
||||
#VUE_APP_BASE_API = 'http://app.rt.xianci.info/'
|
||||
VUE_APP_BASE_API = 'http://office.xianci.info:18904/'
|
||||
#VUE_APP_BASE_API = 'http://api.rt.myntv.cn/'
|
||||
# VUE_APP_BASE_API = 'http://office.xianci.info:18904/'
|
||||
VUE_APP_BASE_API = 'https://api.rt.rtrmt.cn/'
|
||||
|
||||
# base url
|
||||
VUE_APP_BASE_URL = 'http://admin.rt.xianci.info'
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -1,4 +1,4 @@
|
|||
import request from "@/utils/request";
|
||||
import request from '@/utils/request'
|
||||
|
||||
/**
|
||||
* 通讯录
|
||||
|
|
@ -26,8 +26,21 @@ export function staffList(data) {
|
|||
*/
|
||||
export function info(data) {
|
||||
return request({
|
||||
url: "/api/convenience/v2/staff/info",
|
||||
method: "get",
|
||||
url: '/api/convenience/v2/staff/info',
|
||||
method: 'get',
|
||||
params: data
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 文件上传
|
||||
* @param data
|
||||
*/
|
||||
export function upload(data) {
|
||||
return request({
|
||||
url: '/api/common/upload/upload',
|
||||
method: 'post',
|
||||
headers: { 'Content-Type': 'multipart/form-data' },
|
||||
data
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,6 +20,8 @@
|
|||
import OSS from '@/utils/aliOSS'
|
||||
import UUID from 'uuidjs'
|
||||
|
||||
import { upload } from '@/api/staff'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
|
|
@ -58,10 +60,18 @@ export default {
|
|||
const suffix = item.name.substr(item.name.lastIndexOf('.')+1)
|
||||
const fileName = UUID.generate() + '.' + suffix
|
||||
item.name = fileName
|
||||
OSS(item.raw, fileName).then(res => {
|
||||
|
||||
this.$emit('input', 'http://storage.myntv.cn/'+res.name)
|
||||
item.url = 'http://storage.myntv.cn/'+res.name
|
||||
const formData = new FormData()
|
||||
formData.append('file', item.raw, fileName)
|
||||
upload(formData).then(res => {
|
||||
console.log(res)
|
||||
// OSS(item.raw, fileName).then(res => {
|
||||
|
||||
// this.$emit('input', 'http://storage.myntv.cn/'+res.name)
|
||||
// item.url = 'http://storage.myntv.cn/'+res.name
|
||||
this.$emit('input', res.d)
|
||||
item.url = res.d
|
||||
|
||||
item.status = 'success'
|
||||
const list = fileList.filter(item => item.status === 'success').map(item => item.url)
|
||||
console.log(list);
|
||||
|
|
@ -70,13 +80,17 @@ export default {
|
|||
}
|
||||
})
|
||||
} else {
|
||||
// const suffix = file.name.split('.')[0]
|
||||
const suffix = item.name.substr(item.name.lastIndexOf('.')+1)
|
||||
const suffix = file.name.split('.')[0]
|
||||
const fileName = UUID.generate() + '.' + suffix
|
||||
file.name = fileName
|
||||
this.fileList = [file]
|
||||
OSS(file.raw, fileName).then(res => {
|
||||
this.$emit('input', 'http://storage.myntv.cn/'+res.name)
|
||||
|
||||
const formData = new FormData()
|
||||
formData.append('file', file.raw, fileName)
|
||||
upload(formData).then(res => {
|
||||
// OSS(file.raw, fileName).then(res => {
|
||||
// this.$emit('input', 'http://storage.myntv.cn/'+res.name)
|
||||
this.$emit('input', res.d)
|
||||
})
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -41,6 +41,8 @@ import { Loading } from 'element-ui'
|
|||
import OSS from '@/utils/aliOSS'
|
||||
import UUID from 'uuidjs'
|
||||
|
||||
import { upload } from '@/api/staff'
|
||||
|
||||
export default {
|
||||
components: { Preview },
|
||||
props: {
|
||||
|
|
@ -178,8 +180,13 @@ export default {
|
|||
file = item
|
||||
})
|
||||
const suffix = file.name.split('.')[1]
|
||||
OSS(file, UUID.generate() + '.' + suffix).then(res => {
|
||||
resolve(res.url)
|
||||
|
||||
const form = new FormData()
|
||||
form.append('file', file)
|
||||
upload(form).then(res => {
|
||||
// OSS(file, UUID.generate() + '.' + suffix).then(res => {
|
||||
// resolve(res.url)
|
||||
resolve(res.d)
|
||||
loadingInstance.close()
|
||||
}).catch(() => {
|
||||
console.log('文件上传失败!')
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
:style="{ width: width + 'px', height: height + 'px' }"
|
||||
@mouseenter="mouseEnter"
|
||||
@mouseleave="mouseLeave"
|
||||
/>
|
||||
>
|
||||
<i
|
||||
v-else
|
||||
class="el-icon-plus avatar-uploader-icon"
|
||||
|
|
@ -101,7 +101,7 @@
|
|||
</el-upload>
|
||||
<!-- 多图片预览弹窗 -->
|
||||
<el-dialog :visible.sync="dialogVisible" append-to-body>
|
||||
<img width="100%" :src="dialogImageUrl" alt="" />
|
||||
<img width="100%" :src="dialogImageUrl" alt="">
|
||||
</el-dialog>
|
||||
<!-- 剪裁组件弹窗 -->
|
||||
<el-dialog
|
||||
|
|
@ -121,13 +121,15 @@
|
|||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Cropper from "@/components/uploader/cropper";
|
||||
import Cropper from '@/components/uploader/cropper'
|
||||
// import axios from 'axios'
|
||||
import OSS from "@/utils/aliOSS";
|
||||
import UUID from "uuidjs";
|
||||
import OSS from '@/utils/aliOSS'
|
||||
import UUID from 'uuidjs'
|
||||
|
||||
import { upload } from '@/api/staff'
|
||||
|
||||
export default {
|
||||
name: "Uploader",
|
||||
name: 'Uploader',
|
||||
components: {
|
||||
Cropper
|
||||
},
|
||||
|
|
@ -135,7 +137,7 @@ export default {
|
|||
targetUrl: {
|
||||
// 上传地址
|
||||
type: String,
|
||||
default: "http://120.77.82.246:6789/api/postUpLoadFiles"
|
||||
default: 'http://120.77.82.246:6789/api/postUpLoadFiles'
|
||||
},
|
||||
multiple: {
|
||||
// 多图开关
|
||||
|
|
@ -144,12 +146,12 @@ export default {
|
|||
},
|
||||
initUrl: {
|
||||
// 初始图片链接
|
||||
default: ""
|
||||
default: ''
|
||||
},
|
||||
fixedNumber: {
|
||||
// 剪裁框比例设置
|
||||
default: function() {
|
||||
return [3, 1];
|
||||
return [3, 1]
|
||||
}
|
||||
},
|
||||
news: {
|
||||
|
|
@ -169,66 +171,66 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
file: "", // 当前被选择的图片文件
|
||||
imageUrl: "", // 单图情况框内图片链接
|
||||
dialogImageUrl: "", // 多图情况弹窗内图片链接
|
||||
file: '', // 当前被选择的图片文件
|
||||
imageUrl: '', // 单图情况框内图片链接
|
||||
dialogImageUrl: '', // 多图情况弹窗内图片链接
|
||||
uploadList: [], // 上传图片列表
|
||||
reupload: true, // 控制"重新上传"开关
|
||||
dialogVisible: false, // 展示弹窗开关
|
||||
cropperModel: false, // 剪裁组件弹窗开关
|
||||
reuploadWidth: this.height * 0.7 // 动态改变”重新上传“大小
|
||||
};
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
initUrl: function(val) {
|
||||
// 监听传入初始化图片
|
||||
console.info("watch");
|
||||
console.info(val);
|
||||
console.info('watch')
|
||||
console.info(val)
|
||||
if (val) {
|
||||
if (typeof this.initUrl === "string") {
|
||||
this.imageUrl = val;
|
||||
if (typeof this.initUrl === 'string') {
|
||||
this.imageUrl = val
|
||||
} else {
|
||||
this.uploadList = this.formatImgArr(val);
|
||||
this.uploadList = this.formatImgArr(val)
|
||||
}
|
||||
} else {
|
||||
this.imageUrl = "";
|
||||
this.uploadList = [];
|
||||
this.imageUrl = ''
|
||||
this.uploadList = []
|
||||
}
|
||||
}
|
||||
},
|
||||
updated() {
|
||||
if (this.$refs.vueCropper) {
|
||||
this.$refs.vueCropper.Update();
|
||||
this.$refs.vueCropper.Update()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (typeof this.initUrl === "string") {
|
||||
this.imageUrl = this.initUrl;
|
||||
if (typeof this.initUrl === 'string') {
|
||||
this.imageUrl = this.initUrl
|
||||
} else {
|
||||
this.uploadList = this.formatImgArr(this.initUrl);
|
||||
this.uploadList = this.formatImgArr(this.initUrl)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/** **************************** multiple多图情况 **************************************/
|
||||
handlePreview(file) {
|
||||
// 点击进行图片展示
|
||||
this.dialogImageUrl = file.url;
|
||||
this.dialogVisible = true;
|
||||
this.dialogImageUrl = file.url
|
||||
this.dialogVisible = true
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
// 删除图片后更新图片文件列表并通知父级变化
|
||||
this.uploadList = fileList;
|
||||
this.$emit("imgupload", this.formatImgArr(this.uploadList));
|
||||
this.uploadList = fileList
|
||||
this.$emit('imgupload', this.formatImgArr(this.uploadList))
|
||||
},
|
||||
handlePicRemove(file) {
|
||||
this.imageUrl = "";
|
||||
this.$emit("imgupload", this.imageUrl);
|
||||
this.imageUrl = ''
|
||||
this.$emit('imgupload', this.imageUrl)
|
||||
},
|
||||
consoleFL(file, fileList) {
|
||||
// 弹出剪裁框，将当前文件设置为文件
|
||||
this.cropperModel = true;
|
||||
this.file = file;
|
||||
this.uploadList = fileList;
|
||||
this.cropperModel = true
|
||||
this.file = file
|
||||
this.uploadList = fileList
|
||||
},
|
||||
/** **********************************************************************************/
|
||||
|
||||
|
|
@ -236,28 +238,28 @@ export default {
|
|||
handlePreviewSingle(file) {
|
||||
// 点击进行图片展示
|
||||
// this.dialogImageUrl = this.file.url
|
||||
this.dialogImageUrl = this.imageUrl;
|
||||
this.dialogVisible = true;
|
||||
this.dialogImageUrl = this.imageUrl
|
||||
this.dialogVisible = true
|
||||
},
|
||||
mouseEnter() {
|
||||
// 鼠标划入显示“重新上传”
|
||||
this.$refs.reupload.style.display = "block";
|
||||
if (this.$refs.failUpload.style.display === "block") {
|
||||
this.$refs.failUpload.style.display = "none";
|
||||
this.$refs.reupload.style.display = 'block'
|
||||
if (this.$refs.failUpload.style.display === 'block') {
|
||||
this.$refs.failUpload.style.display = 'none'
|
||||
}
|
||||
this.$refs.singleImg.style.opacity = "0.6";
|
||||
this.$refs.singleImg.style.opacity = '0.6'
|
||||
},
|
||||
mouseLeave() {
|
||||
// 鼠标划出隐藏“重新上传”
|
||||
this.$refs.reupload.style.display = "none";
|
||||
this.$refs.singleImg.style.opacity = "1";
|
||||
this.$refs.reupload.style.display = 'none'
|
||||
this.$refs.singleImg.style.opacity = '1'
|
||||
},
|
||||
handleCrop(file, files) {
|
||||
file.url = URL.createObjectURL(file.raw);
|
||||
file.url = URL.createObjectURL(file.raw)
|
||||
// console.log(file)
|
||||
// 点击弹出剪裁框
|
||||
this.cropperModel = true;
|
||||
this.file = file;
|
||||
this.cropperModel = true
|
||||
this.file = file
|
||||
// this.imageUrl = file.url
|
||||
},
|
||||
/** **********************************************************************************/
|
||||
|
|
@ -266,70 +268,85 @@ export default {
|
|||
// 自定义upload事件
|
||||
if (!this.multiple) {
|
||||
// 如果单图，则显示正在上传
|
||||
this.$refs.uploading.style.display = "block";
|
||||
this.$refs.uploading.style.display = 'block'
|
||||
}
|
||||
// const formData = new FormData()
|
||||
// formData.append('file', data, '123.png')
|
||||
// axios.defaults.withCredentials = false
|
||||
// axios.post(this.targetUrl, formData, { headers: { 'Content-Type': 'multipart/form-data' }}).then(res => {
|
||||
const name = UUID.generate() + ".png";
|
||||
OSS(data, name).then(res => {
|
||||
const name = UUID.generate() + '.png'
|
||||
|
||||
const formData = new FormData()
|
||||
formData.append('file', data, name)
|
||||
upload(formData).then(res => {
|
||||
// OSS(data, name).then(res => {
|
||||
if (!this.multiple) {
|
||||
// 上传完成后隐藏正在上传
|
||||
this.$refs.uploading.style.display = "none";
|
||||
this.$refs.uploading.style.display = 'none'
|
||||
}
|
||||
// console.log(res)
|
||||
if (res.res.status === 200) {
|
||||
// if (res.res.status === 200) {
|
||||
// 上传成功将照片传回父组件
|
||||
const currentPic = res.url;
|
||||
const currentPic = res.d
|
||||
if (this.multiple) {
|
||||
this.uploadList.pop();
|
||||
this.uploadList.pop()
|
||||
this.uploadList.push({
|
||||
url: currentPic,
|
||||
uid: "111"
|
||||
});
|
||||
uid: '111'
|
||||
})
|
||||
// console.log(this.formatImgArr(this.uploadList))
|
||||
this.$emit("imgupload", this.formatImgArr(this.uploadList));
|
||||
this.$emit('imgupload', this.formatImgArr(this.uploadList))
|
||||
} else {
|
||||
this.$emit("imgupload", currentPic);
|
||||
this.$emit('imgupload', currentPic)
|
||||
}
|
||||
} else {
|
||||
// } else {
|
||||
// this.$message({
|
||||
// type: "warning",
|
||||
// message: "上传失败!"
|
||||
// });
|
||||
// // 上传失败则显示上传失败，如多图则从图片列表删除图片
|
||||
// if (!this.multiple) {
|
||||
// this.$refs.failUpload.style.display = "block";
|
||||
// } else {
|
||||
// this.uploadList.pop();
|
||||
// }
|
||||
// }
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: "warning",
|
||||
message: "上传失败!"
|
||||
});
|
||||
type: 'warning',
|
||||
message: '上传失败!'
|
||||
})
|
||||
// 上传失败则显示上传失败，如多图则从图片列表删除图片
|
||||
if (!this.multiple) {
|
||||
this.$refs.failUpload.style.display = "block";
|
||||
this.$refs.failUpload.style.display = 'block'
|
||||
} else {
|
||||
this.uploadList.pop();
|
||||
this.uploadList.pop()
|
||||
}
|
||||
}
|
||||
});
|
||||
this.cropperModel = false;
|
||||
})
|
||||
this.cropperModel = false
|
||||
},
|
||||
formatImgArr(arr) {
|
||||
// console.log(arr);
|
||||
if (arr) {
|
||||
const result = arr.map((item, index) => {
|
||||
if (typeof item === "string") {
|
||||
if (typeof item === 'string') {
|
||||
return {
|
||||
url: item,
|
||||
uid: `index${index}`
|
||||
};
|
||||
} else {
|
||||
return item.url;
|
||||
}
|
||||
});
|
||||
return result;
|
||||
} else {
|
||||
return item.url
|
||||
}
|
||||
})
|
||||
return result
|
||||
}
|
||||
},
|
||||
beforeClose(done) {
|
||||
this.uploadList.pop();
|
||||
this.cropperModel = false;
|
||||
this.uploadList.pop()
|
||||
this.cropperModel = false
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.avatar-uploader .el-upload {
|
||||
|
|
|
|||
Loading…
Reference in New Issue