RangTang
/
convenience
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

文件上传修改

This commit is contained in:
HuskyOo 2023-03-09 16:22:07 +08:00
parent 828dcd0510
commit c38bdc3ffe
6 changed files with 148 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.env.development
View File

@ -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'

BIN
convenience-prod.zip Normal file
View File

Binary file not shown.

21
src/api/staff.js
View File

@ -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
})
}

28
src/components/AliOSS/index.vue
View File

@ -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)
})
}
},

11
src/components/UEditor/index.vue
View File

@ -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('文件上传失败!')

181
src/components/cutUploadImage/index.vue
View File

@ -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) {
// 上传成功将照片传回父组件
const currentPic = res.url;
if (this.multiple) {
this.uploadList.pop();
this.uploadList.push({
url: currentPic,
uid: "111"
});
// console.log(this.formatImgArr(this.uploadList))
this.$emit("imgupload", this.formatImgArr(this.uploadList));
} else {
this.$emit("imgupload", currentPic);
}
// if (res.res.status === 200) {
// 上传成功将照片传回父组件
const currentPic = res.d
if (this.multiple) {
this.uploadList.pop()
this.uploadList.push({
url: currentPic,
uid: '111'
})
// console.log(this.formatImgArr(this.uploadList))
this.$emit('imgupload', this.formatImgArr(this.uploadList))
} else {
this.$message({
type: "warning",
message: "上传失败!"
});
// 上传失败则显示上传失败，如多图则从图片列表删除图片
if (!this.multiple) {
this.$refs.failUpload.style.display = "block";
} else {
this.uploadList.pop();
}
this.$emit('imgupload', currentPic)
}
});
this.cropperModel = false;
// } 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: '上传失败!'
})
// 上传失败则显示上传失败，如多图则从图片列表删除图片
if (!this.multiple) {
this.$refs.failUpload.style.display = 'block'
} else {
this.uploadList.pop()
}
})
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 item.url
}
});
return result;
})
return result
}
},
beforeClose(done) {
this.uploadList.pop();
this.cropperModel = false;
this.uploadList.pop()
this.cropperModel = false
}
}
};
}
</script>
<style>
.avatar-uploader .el-upload {