wz_shi
3 years ago
3 changed files with 265 additions and 85 deletions
-
22src/views/components/upload_img3.vue
-
231src/views/components/upload_img4.vue
-
97src/views/materialContent/materialList/index.vue
@ -0,0 +1,231 @@ |
|||
<template> |
|||
<div class="components_upload"> |
|||
<!-- <input id="upFile" type="file" name="upFile" @change="changeFile($event)" /> --> |
|||
<el-button class="cont_upload_btn" round type="primary">上传</el-button> |
|||
<input id="upFile" type="file" name="upFile" @change="changeFile($event)" /> |
|||
<!-- <img v-if="coverUrl" :src="coverUrl" alt="封面" /> --> |
|||
<!-- <el-progress :percentage="filePercent" /> |
|||
{{ filePercent }} --> |
|||
|
|||
<!-- 上传列表layer --> |
|||
<div class="upload_layer"> |
|||
<!-- width="736px" --> |
|||
<el-dialog |
|||
title="上传列表" |
|||
:close-on-click-modal="false" |
|||
:show-close="false" |
|||
:visible.sync="uploadListVisible" |
|||
height="384px" |
|||
> |
|||
<!-- :status="percentage === 100 ? undefined : 'success'" --> |
|||
<el-table :data="fileData" :header-cell-style="{ color: '#333' }"> |
|||
<el-table-column align="center" prop="fileNames" label="文件名" /> |
|||
<el-table-column align="center" prop="formatType" label="类型" /> |
|||
<el-table-column align="center" prop="fileSize" label="大小" /> |
|||
<el-table-column align="center" prop="filePercentTxt" label="状态"> |
|||
<template> |
|||
<div class="loadingModal" :style="{ 'height': '100%' }"> |
|||
<!-- :format="format" --> |
|||
<!-- <el-progress |
|||
:stroke-width="6" |
|||
:percentage="filePercent" |
|||
:color="colors" |
|||
/> --> |
|||
{{ filePercentTxt }} |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column align="center" prop="handle" label="操作"> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
type="primary" |
|||
round |
|||
class="on_off_btn" |
|||
@click="end(scope.$index, scope.row)" |
|||
>{{ loading_txt }}</el-button> |
|||
<el-button |
|||
type="info" |
|||
round |
|||
class="upload_delt" |
|||
@click="handleRecord(scope.$index, scope.row)" |
|||
>删除</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div class="upload_list_right"> |
|||
<!-- <el-upload |
|||
class="upload-demo" |
|||
action="https://jsonplaceholder.typicode.com/posts/" |
|||
multiple |
|||
:limit="3" |
|||
> |
|||
<div class="right_upload">点击上传</div> |
|||
</el-upload> --> |
|||
<input type="button" name="开始上传" value="开始上传" @click="uploadFile()" /> |
|||
<div class="upload_return" @click="uploadListVisible=false">返回</div> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import * as qiniu from 'qiniu-js' |
|||
import { getQiniuToken } from '@/api/material/material' |
|||
export default { |
|||
name: 'Qiniu', |
|||
data() { |
|||
return { |
|||
file: null, |
|||
token: '', |
|||
baseurl: 'qiniu.aiyxlib.com', |
|||
fileData: [], |
|||
uploadFileUrl: null, |
|||
filePercent: 0, |
|||
fileNames: '', |
|||
formatType: '', |
|||
postfix: '', |
|||
fileSize: '', |
|||
uploadListVisible: false, |
|||
loading_txt: '暂停', |
|||
colors: '#1e9f4c', |
|||
uploadListData: [], |
|||
filePercentTxt: '上传中' |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.getQiniuToken() |
|||
}, |
|||
methods: { |
|||
changeFile(e) { |
|||
// 获取文件 |
|||
this.file = e.target.files[0] |
|||
this.formatType = this.file.type.substring(0, this.file.type.indexOf('/')) |
|||
console.log('formatType', this.formatType) |
|||
this.fileNames = this.file.name |
|||
console.log('fileNames', this.fileNames) |
|||
this.postfix = this.fileNames.substring( |
|||
this.fileNames.lastIndexOf('.') + 1, |
|||
this.fileNames.length |
|||
) |
|||
console.log(this.postfix) |
|||
this.fileSize = this.file.size |
|||
console.log('fileSize', this.fileSize) |
|||
|
|||
if (this.formatType === 'image') { |
|||
const isJPG = this.file.type === 'image/jpeg' || this.file.type === 'image/png' || this.file.type === 'image/bmp' || this.file.type === 'image/gif' |
|||
const isLt2M = this.file.size / 1024 / 1024 < 4 |
|||
if (!isJPG) { |
|||
this.$message.error('图片只支持bmp、jpg、png、gif格式的文件') |
|||
} |
|||
if (!isLt2M) { |
|||
this.$message.error('图片大小不能超过 4MB !') |
|||
} |
|||
} |
|||
|
|||
this.uploadListVisible = true |
|||
this.fileData.push({ |
|||
fileNames: this.fileNames, |
|||
formatType: this.formatType, |
|||
fileSize: this.fileSize, |
|||
filePercentTxt: this.filePercentTxt |
|||
}) |
|||
console.log(this.fileData[0].filePercent) |
|||
}, |
|||
getQiniuToken() { |
|||
getQiniuToken().then(res => { |
|||
this.token = res.data |
|||
}) |
|||
}, |
|||
// format(percentage) { |
|||
// return percentage === 100 ? '100%' : `${percentage}%` |
|||
// }, |
|||
uploadFile() { |
|||
// 当前VUE中的this 是指向实例，相当于父级，指向指不到子级中。所需需要一个变量 _this 存储this得指向。 |
|||
const _this = this |
|||
|
|||
// 获取身份的token |
|||
const token = _this.token |
|||
console.log(token) |
|||
// 上传时的配置 |
|||
var config = { |
|||
useCdnDomain: true |
|||
} |
|||
// 设置文件的配置 |
|||
var putExtra = { |
|||
fname: '', |
|||
params: {}, |
|||
mimeType: null |
|||
} |
|||
// 实例化七牛云的上传实例 |
|||
var observable = qiniu.upload(_this.file, _this.file.name, token, putExtra, { resumingByFileSize: 4 * 1024 * 1024 }, config) |
|||
// 设置实例的监听对象 |
|||
var observer = { |
|||
// 接收上传进度信息 |
|||
next(res) { |
|||
// 上传进度 |
|||
console.log(res) |
|||
console.log(res.total.size) |
|||
_this.filePercent = parseInt(res.total.percent) |
|||
console.log(_this.filePercent) |
|||
this.filePercentTxt = '上传中' |
|||
if (_this.filePercent == 100) { |
|||
// _this.fileData.push(_this.filePercent) |
|||
// _this.fileData.forEach((value, index) => { |
|||
// value['filePercent'] = parseInt(res.total.percent) |
|||
// }) |
|||
this.filePercentTxt = '上传成功' |
|||
console.log('success') |
|||
} |
|||
console.log(_this.fileData) |
|||
// _this.fileData[0].filePercent = parseInt(res.total.percent) |
|||
// console.log(_this.fileData[0].filePercent) |
|||
// _this.fileData.forEach((value, index) => { |
|||
// value['filePercent'] = parseInt(res.total.percent) |
|||
// }) |
|||
}, |
|||
// 接收上传错误信息 |
|||
error(err) { |
|||
console.log(err) |
|||
}, |
|||
|
|||
// 接收上传完成后的信息 |
|||
complete(res) { |
|||
this.filePercentTxt = '上传成功' |
|||
console.log(res) |
|||
console.log(res.key) |
|||
_this.uploadFileUrl = 'http://' + _this.baseurl + '/' + res.key |
|||
console.log(_this.uploadFileUrl) |
|||
// console.log(_this.fileUrl.push({ name: _this.file.name, url: _this.fileUrl })) |
|||
// console.log(_this.fileUrl) |
|||
} |
|||
} |
|||
// 上传开始 |
|||
var subscription = observable.subscribe(observer) |
|||
// subscription.unsubscribe() 停止当前文件上传 |
|||
} |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.components_upload{ |
|||
position: relative; |
|||
// width: 100%; |
|||
} |
|||
#upFile{ |
|||
display: block; |
|||
width: 114px; |
|||
height: 34px; |
|||
padding: 0; |
|||
font-size: 14px; |
|||
border: none; |
|||
opacity: 0; |
|||
} |
|||
.cont_upload_btn{ |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
} |
|||
</style> |
|||
|
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue