赞
踩
下载依赖 npm install ali-oss
这里用的elementUI 里的upload上传文件功能
-
- <el-form-item label="图片" prop="content" class="editor_box">
- <el-upload action="" class="avatar-uploader" :http-request="uploadAvatarTwo"
- :before-upload="beforeUpload" :on-success="handleSuccess"
- accept=".png,.jpg,.gif,.jepg" :show-file-list="false">
- </el-upload>
- </el-form-item>
- // 图片上传阿里云之前 调用后台接口获取一些上传oss的参数
- async beforeUpload(file) {
- let that = this
- this.uillUpdateImg = true
- this.videoFlag = false
- await http.get("/photo/fetchStsCredentials", {})
- .then(function (res) {
- that.accessKeyId = res.data.accessKey;
- that.accessKeySecret = res.data.accessKeySecret;
- that.securityToken = res.data.securityToken
- })
- .catch(function (err) {
- console.log("连接失败" + err);
- });
- },
- //上传到阿里云oss
- uploadAvatarTwo(options) {
- let that = this
- let client = new OSS({
- region: "oss-cn-qingdao",
- accessKeyId: that.accessKeyId,
- accessKeySecret: that.accessKeySecret,
- stsToken: that.securityToken,
- bucket: "medai",
- });
-
- let file = options.file; // 拿到 file
- let fileName = file.name.substr(0, file.name.lastIndexOf('.'))
- let date = new Date().getTime()
- let fileNames = `${date}_${fileName}`
- client.put(fileNames, file,).then(res => {
- if (res.res.statusCode === 200) {
- console.log(res);
- options.onSuccess(res)
- } else {
- options.onError("上传失败")
- }
-
- })
- },
- //上传成功后回调
- handleSuccess(res) {
- console.log(res);
-
- // 如果上传成功
- if (res) {
-
- } else {
-
- }
- // loading动画消失
- this.uillUpdateImg = false
- },
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。