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 # base api
#VUE_APP_BASE_API = '/dev-api' #VUE_APP_BASE_API = '/dev-api'
#VUE_APP_BASE_API = 'http://app.rt.xianci.info/' #VUE_APP_BASE_API = 'http://app.rt.xianci.info/'
VUE_APP_BASE_API = 'http://office.xianci.info:18904/' # VUE_APP_BASE_API = 'http://office.xianci.info:18904/'
#VUE_APP_BASE_API = 'http://api.rt.myntv.cn/' VUE_APP_BASE_API = 'https://api.rt.rtrmt.cn/'
# base url # base url
VUE_APP_BASE_URL = 'http://admin.rt.xianci.info' 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) { export function info(data) {
return request({ return request({
url: "/api/convenience/v2/staff/info", url: '/api/convenience/v2/staff/info',
method: "get", method: 'get',
params: data 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 OSS from '@/utils/aliOSS'
import UUID from 'uuidjs' import UUID from 'uuidjs'
import { upload } from '@/api/staff'
export default { export default {
props: { props: {
value: { value: {
@ -58,10 +60,18 @@ export default {
const suffix = item.name.substr(item.name.lastIndexOf('.')+1) const suffix = item.name.substr(item.name.lastIndexOf('.')+1)
const fileName = UUID.generate() + '.' + suffix const fileName = UUID.generate() + '.' + suffix
item.name = fileName item.name = fileName
OSS(item.raw, fileName).then(res => {
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) // this.$emit('input', 'http://storage.myntv.cn/'+res.name)
item.url = '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' item.status = 'success'
const list = fileList.filter(item => item.status === 'success').map(item => item.url) const list = fileList.filter(item => item.status === 'success').map(item => item.url)
console.log(list); console.log(list);
@ -70,13 +80,17 @@ export default {
} }
}) })
} else { } else {
// const suffix = file.name.split('.')[0] const suffix = file.name.split('.')[0]
const suffix = item.name.substr(item.name.lastIndexOf('.')+1)
const fileName = UUID.generate() + '.' + suffix const fileName = UUID.generate() + '.' + suffix
file.name = fileName file.name = fileName
this.fileList = [file] 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 OSS from '@/utils/aliOSS'
import UUID from 'uuidjs' import UUID from 'uuidjs'
import { upload } from '@/api/staff'
export default { export default {
components: { Preview }, components: { Preview },
props: { props: {
@ -178,8 +180,13 @@ export default {
file = item file = item
}) })
const suffix = file.name.split('.')[1] 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() loadingInstance.close()
}).catch(() => { }).catch(() => {
console.log('文件上传失败!') console.log('文件上传失败!')

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

@ -32,7 +32,7 @@
:style="{ width: width + 'px', height: height + 'px' }" :style="{ width: width + 'px', height: height + 'px' }"
@mouseenter="mouseEnter" @mouseenter="mouseEnter"
@mouseleave="mouseLeave" @mouseleave="mouseLeave"
/> >
<i <i
v-else v-else
class="el-icon-plus avatar-uploader-icon" class="el-icon-plus avatar-uploader-icon"
@ -101,7 +101,7 @@
</el-upload> </el-upload>
<!-- 多图片预览弹窗 --> <!-- 多图片预览弹窗 -->
<el-dialog :visible.sync="dialogVisible" append-to-body> <el-dialog :visible.sync="dialogVisible" append-to-body>
<img width="100%" :src="dialogImageUrl" alt="" /> <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog> </el-dialog>
<!-- 剪裁组件弹窗 --> <!-- 剪裁组件弹窗 -->
<el-dialog <el-dialog
@ -121,13 +121,15 @@
</div> </div>
</template> </template>
<script> <script>
import Cropper from "@/components/uploader/cropper"; import Cropper from '@/components/uploader/cropper'
// import axios from 'axios' // import axios from 'axios'
import OSS from "@/utils/aliOSS"; import OSS from '@/utils/aliOSS'
import UUID from "uuidjs"; import UUID from 'uuidjs'
import { upload } from '@/api/staff'
export default { export default {
name: "Uploader", name: 'Uploader',
components: { components: {
Cropper Cropper
}, },
@ -135,7 +137,7 @@ export default {
targetUrl: { targetUrl: {
// 上传地址 // 上传地址
type: String, type: String,
default: "http://120.77.82.246:6789/api/postUpLoadFiles" default: 'http://120.77.82.246:6789/api/postUpLoadFiles'
}, },
multiple: { multiple: {
// 多图开关 // 多图开关
@ -144,12 +146,12 @@ export default {
}, },
initUrl: { initUrl: {
// 初始图片链接 // 初始图片链接
default: "" default: ''
}, },
fixedNumber: { fixedNumber: {
// 剪裁框比例设置 // 剪裁框比例设置
default: function() { default: function() {
return [3, 1]; return [3, 1]
} }
}, },
news: { news: {
@ -169,66 +171,66 @@ export default {
}, },
data() { data() {
return { return {
file: "", // 当前被选择的图片文件 file: '', // 当前被选择的图片文件
imageUrl: "", // 单图情况框内图片链接 imageUrl: '', // 单图情况框内图片链接
dialogImageUrl: "", // 多图情况弹窗内图片链接 dialogImageUrl: '', // 多图情况弹窗内图片链接
uploadList: [], // 上传图片列表 uploadList: [], // 上传图片列表
reupload: true, // 控制"重新上传"开关 reupload: true, // 控制"重新上传"开关
dialogVisible: false, // 展示弹窗开关 dialogVisible: false, // 展示弹窗开关
cropperModel: false, // 剪裁组件弹窗开关 cropperModel: false, // 剪裁组件弹窗开关
reuploadWidth: this.height * 0.7 // 动态改变”重新上传“大小 reuploadWidth: this.height * 0.7 // 动态改变”重新上传“大小
}; }
}, },
watch: { watch: {
initUrl: function(val) { initUrl: function(val) {
// 监听传入初始化图片 // 监听传入初始化图片
console.info("watch"); console.info('watch')
console.info(val); console.info(val)
if (val) { if (val) {
if (typeof this.initUrl === "string") { if (typeof this.initUrl === 'string') {
this.imageUrl = val; this.imageUrl = val
} else { } else {
this.uploadList = this.formatImgArr(val); this.uploadList = this.formatImgArr(val)
} }
} else { } else {
this.imageUrl = ""; this.imageUrl = ''
this.uploadList = []; this.uploadList = []
} }
} }
}, },
updated() { updated() {
if (this.$refs.vueCropper) { if (this.$refs.vueCropper) {
this.$refs.vueCropper.Update(); this.$refs.vueCropper.Update()
} }
}, },
mounted() { mounted() {
if (typeof this.initUrl === "string") { if (typeof this.initUrl === 'string') {
this.imageUrl = this.initUrl; this.imageUrl = this.initUrl
} else { } else {
this.uploadList = this.formatImgArr(this.initUrl); this.uploadList = this.formatImgArr(this.initUrl)
} }
}, },
methods: { methods: {
/** **************************** multiple多图情况 **************************************/ /** **************************** multiple多图情况 **************************************/
handlePreview(file) { handlePreview(file) {
// 点击进行图片展示 // 点击进行图片展示
this.dialogImageUrl = file.url; this.dialogImageUrl = file.url
this.dialogVisible = true; this.dialogVisible = true
}, },
handleRemove(file, fileList) { handleRemove(file, fileList) {
// 删除图片后更新图片文件列表并通知父级变化 // 删除图片后更新图片文件列表并通知父级变化
this.uploadList = fileList; this.uploadList = fileList
this.$emit("imgupload", this.formatImgArr(this.uploadList)); this.$emit('imgupload', this.formatImgArr(this.uploadList))
}, },
handlePicRemove(file) { handlePicRemove(file) {
this.imageUrl = ""; this.imageUrl = ''
this.$emit("imgupload", this.imageUrl); this.$emit('imgupload', this.imageUrl)
}, },
consoleFL(file, fileList) { consoleFL(file, fileList) {
// 弹出剪裁框，将当前文件设置为文件 // 弹出剪裁框，将当前文件设置为文件
this.cropperModel = true; this.cropperModel = true
this.file = file; this.file = file
this.uploadList = fileList; this.uploadList = fileList
}, },
/** **********************************************************************************/ /** **********************************************************************************/
@ -236,28 +238,28 @@ export default {
handlePreviewSingle(file) { handlePreviewSingle(file) {
// 点击进行图片展示 // 点击进行图片展示
// this.dialogImageUrl = this.file.url // this.dialogImageUrl = this.file.url
this.dialogImageUrl = this.imageUrl; this.dialogImageUrl = this.imageUrl
this.dialogVisible = true; this.dialogVisible = true
}, },
mouseEnter() { mouseEnter() {
// 鼠标划入显示“重新上传” // 鼠标划入显示“重新上传”
this.$refs.reupload.style.display = "block"; this.$refs.reupload.style.display = 'block'
if (this.$refs.failUpload.style.display === "block") { if (this.$refs.failUpload.style.display === 'block') {
this.$refs.failUpload.style.display = "none"; this.$refs.failUpload.style.display = 'none'
} }
this.$refs.singleImg.style.opacity = "0.6"; this.$refs.singleImg.style.opacity = '0.6'
}, },
mouseLeave() { mouseLeave() {
// 鼠标划出隐藏“重新上传” // 鼠标划出隐藏“重新上传”
this.$refs.reupload.style.display = "none"; this.$refs.reupload.style.display = 'none'
this.$refs.singleImg.style.opacity = "1"; this.$refs.singleImg.style.opacity = '1'
}, },
handleCrop(file, files) { handleCrop(file, files) {
file.url = URL.createObjectURL(file.raw); file.url = URL.createObjectURL(file.raw)
// console.log(file) // console.log(file)
// 点击弹出剪裁框 // 点击弹出剪裁框
this.cropperModel = true; this.cropperModel = true
this.file = file; this.file = file
// this.imageUrl = file.url // this.imageUrl = file.url
}, },
/** **********************************************************************************/ /** **********************************************************************************/
@ -266,70 +268,85 @@ export default {
// 自定义upload事件 // 自定义upload事件
if (!this.multiple) { if (!this.multiple) {
// 如果单图，则显示正在上传 // 如果单图，则显示正在上传
this.$refs.uploading.style.display = "block"; this.$refs.uploading.style.display = 'block'
} }
// const formData = new FormData() // const formData = new FormData()
// formData.append('file', data, '123.png') // formData.append('file', data, '123.png')
// axios.defaults.withCredentials = false // axios.defaults.withCredentials = false
// axios.post(this.targetUrl, formData, { headers: { 'Content-Type': 'multipart/form-data' }}).then(res => { // axios.post(this.targetUrl, formData, { headers: { 'Content-Type': 'multipart/form-data' }}).then(res => {
const name = UUID.generate() + ".png"; const name = UUID.generate() + '.png'
OSS(data, name).then(res => {
const formData = new FormData()
formData.append('file', data, name)
upload(formData).then(res => {
// OSS(data, name).then(res => {
if (!this.multiple) { if (!this.multiple) {
// 上传完成后隐藏正在上传 // 上传完成后隐藏正在上传
this.$refs.uploading.style.display = "none"; this.$refs.uploading.style.display = 'none'
} }
// console.log(res) // console.log(res)
if (res.res.status === 200) { // if (res.res.status === 200) {
// 上传成功将照片传回父组件 // 上传成功将照片传回父组件
const currentPic = res.url; const currentPic = res.d
if (this.multiple) { if (this.multiple) {
this.uploadList.pop(); this.uploadList.pop()
this.uploadList.push({ this.uploadList.push({
url: currentPic, url: currentPic,
uid: "111" uid: '111'
}); })
// console.log(this.formatImgArr(this.uploadList)) // 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);
}
} else { } else {
this.$message({ this.$emit('imgupload', currentPic)
type: "warning",
message: "上传失败!"
});
// 上传失败则显示上传失败，如多图则从图片列表删除图片
if (!this.multiple) {
this.$refs.failUpload.style.display = "block";
} else {
this.uploadList.pop();
}
} }
}); // } else {
this.cropperModel = false; // 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) { formatImgArr(arr) {
// console.log(arr); // console.log(arr);
if (arr) { if (arr) {
const result = arr.map((item, index) => { const result = arr.map((item, index) => {
if (typeof item === "string") { if (typeof item === 'string') {
return { return {
url: item, url: item,
uid: `index${index}` uid: `index${index}`
}; }
} else { } else {
return item.url; return item.url
} }
}); })
return result; return result
} }
}, },
beforeClose(done) { beforeClose(done) {
this.uploadList.pop(); this.uploadList.pop()
this.cropperModel = false; this.cropperModel = false
} }
} }
}; }
</script> </script>
<style> <style>
.avatar-uploader .el-upload { .avatar-uploader .el-upload {