vue + elementUi + upLoadIamge组件 上传文件到阿里云oss
程序员文章站
2022-07-01 20:47:05
......
<template> <div class="uploadiamge"> <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-preview="handlepicturecardpreview" :on-remove="handleremove" :http-request="myload" > <i class="el-icon-plus"></i> </el-upload> <el-dialog :visible.sync="dialogvisible"> <img width="100%" :src="dialogimageurl" alt=""> </el-dialog> </div> </template>
<script> let axios = require('axios') export default { name: 'uploadiamge', data () { return { dialogimageurl: '', dialogvisible: false } }, methods: { handleremove (file, filelist) { console.log(file, filelist) }, handlepicturecardpreview (file) { this.dialogimageurl = file.url this.dialogvisible = true }, // 自定义上传的方式 作者:曾经的水哥 https://www.cnblogs.com/cengjingdeshuige/ myload (param) { let file = param.file // 得到文件的内容 console.log(file) let index = file.name.indexof('.') let nameend = file.name.substr(index) const ossapiurl = '这个是获取oss签名的后台接口地址' // 获取oss签名的地址 // 获取oss签名 axios.post(ossapiurl).then((data) => { if (data.status == 200 && data.data.code == 0) { //eslint-disable-line let json = data.data.data let ossurl = json.host let namestart = new date().gettime() + '' + math.ceil(math.random() * 100) let name = '/' + namestart + nameend let geturl = json.host + '/' + json.dir + name // 上传后的文件地址 let senddata = new formdata() // 上传文件的data参数 senddata.append('ossaccesskeyid', json.accessid) senddata.append('policy', json.policy) senddata.append('signature', json.signature) senddata.append('keys', json.dir) senddata.append('key', json.dir + name) senddata.append('success_action_status', 200) // 指定返回的状态码 senddata.append('type', 'image/jpeg') senddata.append('file', file) console.log(senddata) axios.post(ossurl, senddata).then(() => { console.log('得到上传到阿里云的图片地址: ' + geturl) }) } }) } }, mounted () { } } </script>