当前位置:   article > 正文

阿里云oss上传文件 excel 图片 视频 基本使用_阿里oss追加上传excel

阿里oss追加上传excel

下载依赖 npm install ali-oss

这里用的elementUI 里的upload上传文件功能

  1. <el-form-item label="图片" prop="content" class="editor_box">
  2. <el-upload action="" class="avatar-uploader" :http-request="uploadAvatarTwo"
  3. :before-upload="beforeUpload" :on-success="handleSuccess"
  4. accept=".png,.jpg,.gif,.jepg" :show-file-list="false">
  5. </el-upload>
  6. </el-form-item>
  1. // 图片上传阿里云之前 调用后台接口获取一些上传oss的参数
  2. async beforeUpload(file) {
  3. let that = this
  4. this.uillUpdateImg = true
  5. this.videoFlag = false
  6. await http.get("/photo/fetchStsCredentials", {})
  7. .then(function (res) {
  8. that.accessKeyId = res.data.accessKey;
  9. that.accessKeySecret = res.data.accessKeySecret;
  10. that.securityToken = res.data.securityToken
  11. })
  12. .catch(function (err) {
  13. console.log("连接失败" + err);
  14. });
  15. },
  1. //上传到阿里云oss
  2. uploadAvatarTwo(options) {
  3. let that = this
  4. let client = new OSS({
  5. region: "oss-cn-qingdao",
  6. accessKeyId: that.accessKeyId,
  7. accessKeySecret: that.accessKeySecret,
  8. stsToken: that.securityToken,
  9. bucket: "medai",
  10. });
  11. let file = options.file; // 拿到 file
  12. let fileName = file.name.substr(0, file.name.lastIndexOf('.'))
  13. let date = new Date().getTime()
  14. let fileNames = `${date}_${fileName}`
  15. client.put(fileNames, file,).then(res => {
  16. if (res.res.statusCode === 200) {
  17. console.log(res);
  18. options.onSuccess(res)
  19. } else {
  20. options.onError("上传失败")
  21. }
  22. })
  23. },
  1. //上传成功后回调
  2. handleSuccess(res) {
  3. console.log(res);
  4. // 如果上传成功
  5. if (res) {
  6. } else {
  7. }
  8. // loading动画消失
  9. this.uillUpdateImg = false
  10. },

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/2023面试高手/article/detail/599167
推荐阅读
相关标签