|
@@ -0,0 +1,147 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-upload
|
|
|
+ :multiple="true"
|
|
|
+ action="null"
|
|
|
+ :file-list="fileList"
|
|
|
+ :show-file-list="true"
|
|
|
+ :on-preview="handlePreview"
|
|
|
+ :on-remove="handleRemove"
|
|
|
+ :on-success="handleSuccess"
|
|
|
+ class="upload-demo"
|
|
|
+ drag
|
|
|
+ :limit="1"
|
|
|
+ :http-request="uploadResourceRequest"
|
|
|
+ >
|
|
|
+ <i class="el-icon-upload" />
|
|
|
+ <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
|
|
|
+ </el-upload>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+
|
|
|
+import { uploadOn, del } from './notificaUpload'
|
|
|
+import baseUrl from '../../utils/baseUrl.js'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'FileUpload',
|
|
|
+ // 接受父组件的值
|
|
|
+// props: {
|
|
|
+// value: { type: String },
|
|
|
+// code: {
|
|
|
+// type: String,
|
|
|
+// default: 'AsApplication'
|
|
|
+// }
|
|
|
+// },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ processurl: process.env.NODE_ENV === "production" ? baseUrl.ROOT : baseUrl.ROOT,
|
|
|
+ fileList: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ // value(newValue, oldValue) {
|
|
|
+ // console.log(newValue, 'valStr')
|
|
|
+ // if (newValue) {
|
|
|
+ // this.fileList = []
|
|
|
+ // // 如果多个文件 process.env.VUE_APP_BASE_IMS_EXT + 'f-center/hadoop/hdfs/download?path=' +
|
|
|
+ // const files = newValue.split(',')
|
|
|
+ // for (let i = 0; i < files.length; i++) {
|
|
|
+ // const s = files[i].substring(files[i].lastIndexOf('/') + 1, files[i].length)
|
|
|
+
|
|
|
+ // const datas = {
|
|
|
+ // name: s,
|
|
|
+ // url: files[i]
|
|
|
+ // }
|
|
|
+ // this.fileList.push(datas)
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /**
|
|
|
+ * 自定义上传
|
|
|
+ * @param elementUI 自动传的参数,这个参数就是文件对象
|
|
|
+ */
|
|
|
+ uploadResourceRequest(param) {
|
|
|
+ param.status = 'uploading' // 文件上传状态
|
|
|
+ param.percentage = 0 // 文件上传进度,这里设为0
|
|
|
+ param.name = param.file.name // 文件名
|
|
|
+ const uploadEvent = (progressEvent) => {
|
|
|
+ this.progressPercent = Number(
|
|
|
+ ((progressEvent.loaded / progressEvent.total) * 100).toFixed(2)
|
|
|
+ )
|
|
|
+ }
|
|
|
+ debugger
|
|
|
+ uploadOn('AsApplication', 'xxxt/image', '', param.file, 'yysd', uploadEvent).then(response => {
|
|
|
+ // 请求成功
|
|
|
+ const datas = {
|
|
|
+ name: response.data.docFileName,
|
|
|
+ url: this.processurl + 'f-center/hadoop/hdfs/download?path=' + response.data.docPath,
|
|
|
+ path: response.data.docPath
|
|
|
+ }
|
|
|
+ this.fileList.push(datas)
|
|
|
+ // 每次上传成功后就将 fileList 拼接返回给父组件
|
|
|
+ let fileStr = ''
|
|
|
+ const fileLists = this.fileList
|
|
|
+ if (fileLists.length > 0) {
|
|
|
+ for (let v = 0; v < fileLists.length; v++) {
|
|
|
+ fileStr = fileLists[v].path + ','
|
|
|
+ }
|
|
|
+ }
|
|
|
+ fileStr = fileStr.substring(0, fileStr.lastIndexOf(','))
|
|
|
+ this.$emit('input', fileStr)
|
|
|
+ param.status = 'success' // 上传成功后将status属性改成success
|
|
|
+ }).catch(function(error) {
|
|
|
+ // 请求失败处理
|
|
|
+ console.log(error)
|
|
|
+ param.status = 'failed'
|
|
|
+ param.message = '上传失败'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 文件移除
|
|
|
+ handleRemove(file) {
|
|
|
+ const name = this.fileList.findIndex(item => {
|
|
|
+ if (item.name == file.name) {
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ console.log(file.url, '删除文件')
|
|
|
+ // 调用删除接口
|
|
|
+ del(file.url).then(response => {
|
|
|
+ this.fileList.splice(name, 1)
|
|
|
+ // 移除后重新给父组件赋值
|
|
|
+ // 每次上传成功后就将 fileList 拼接返回给父组件
|
|
|
+ let fileStr = ''
|
|
|
+ const fileLists = this.fileList
|
|
|
+ if (fileLists.length > 0) {
|
|
|
+ for (let v = 0; v < fileLists.length; v++) {
|
|
|
+ fileStr = fileLists[v].path + ','
|
|
|
+ }
|
|
|
+ }
|
|
|
+ fileStr = fileStr.substring(0, fileStr.lastIndexOf(','))
|
|
|
+ this.$emit('input', fileStr)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 文件预览
|
|
|
+ handlePreview(file) {
|
|
|
+ // 下载文件 或者在线预览
|
|
|
+ },
|
|
|
+ handleSuccess(response) {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.editor-slide-upload {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ ::v-deep .el-upload--picture-card {
|
|
|
+ width: 20%;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|