1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128
| <template> <div class="home"> <el-upload class="upload-demo" action :http-request="fnUploadRequest" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" > <i class="el-icon-plus"></i> </el-upload> <el-dialog :visible.sync="dialogVisible"> <img width="100%" :src="dialogImageUrl" alt="" /> </el-dialog> </div> </template>
<script> import OSS from "ali-oss"; export default { data() { return { dialogImageUrl: "", dialogVisible: false, disabled: false, loading: false, fileList: [], }; }, methods: { handleRemove(file, fileList) { console.log(file, fileList); }, handlePictureCardPreview(file) { this.dialogImageUrl = file.url; this.dialogVisible = true; }, async fnUploadRequest(option) { try { console.log("参数", option); let client = new OSS({ secure: true, accessKeyId: "", accessKeySecret: "", bucket: "", region: "", }); this.loading = true; function getFormatDate() { var date = new Date(); var month = date.getMonth() + 1; var strDate = date.getDate(); if (month >= 1 && month <= 9) { month = "0" + month; } if (strDate >= 0 && strDate <= 9) { strDate = "0" + strDate; } var currentDate = date.getFullYear() + "-" + month + "-" + strDate + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds(); return currentDate; }
let file = option.file; const point = file.name.lastIndexOf("."); let suffix = file.name.substr(point); let fileName = file.name.substr(0, point); let date = getFormatDate(); let fileNames = `${fileName}_${date}${suffix}`; let relativePath = "blog/"; console.log("oss客户端", client); console.log("文件", file); let ret = await client.multipartUpload(relativePath + fileNames, file, { progress: async function(p) { let e = {}; e.percent = p * 100; option.onProgress(e); }, });
if (ret.res.statusCode === 200) { console.log("上传成功", ret); } else { option.onError("上传失败"); } } catch (error) { console.error(error); option.onError("上传失败"); } this.loading = false; }, }, }; </script>
<style> .home { width: 100%; height: 100vh; position: relative; }
.upload-demo { width: 30%; height: 30%; position: absolute; top: 0; bottom: 0; right: 0; left: 0; margin: auto; text-align: center; } </style>
|