vue上传图片到oss的方法示例(图片带有删除功能)


Posted in Javascript onSeptember 27, 2018

最近Vue项目中,要将用户上传的图片全部上传到oss上,

OSS配置项请访问:https://help.aliyun.com/document_detail/64095.html?spm=a2c4g.11186623.6.773.kcD20n

OSS平台配置

在平台的概览里面看看自己的基础设置里面的读写权限是否改为了公共读,我这边只有配置公共读才上传并且回显图片成功,其他情况还请朋友告知,谢谢

关于跨域访问的配置

vue上传图片到oss的方法示例(图片带有删除功能)

这里是我的效果图 (当只有点击上传按钮时才会上传到OSS)

vue上传图片到oss的方法示例(图片带有删除功能)

预览图片

<template>
  <div class="vue-uploader">
    <div class="file-list">
      <section v-for="(file, index) of files" class="file-item draggable-item" :key="file.name">
        <img :src="file.src" alt="" ondragstart="return false;">
        <span class="file-remove" @click="remove(index)">+</span>
      </section>
      <section v-if="status == 'ready'" class="file-item">
        <div @click="add" class="add"></div>
      </section>
    </div>
    <section v-if="files.length != 0" class="upload-func">
      <div class="progress-bar">
        <section v-if="uploading" :width="(percent * 100) + '%'">{{(percent * 100) + '%'}}</section>
      </div>
      <div class="operation-box">
        <button v-if="status == 'ready'" @click="submit">上传</button>
        <button v-if="status == 'finished'" @click="finished">完成</button>
      </div>
    </section>
    <input type="file" @change="fileChanged" ref="file" multiple="multiple" accept="image/jpg,image/jpeg,image/png,image/bmp">
  </div>
</template>
<script>
  export default {
    data() {
      return {
        status: 'ready',
        files: [],
        point: {},
        uploading: false,
        percent: 0
      }
    },
    methods: {
      add() {
        this.$refs.file.click()
      },
      submit() {
        console.log(this.files)
        // if (this.files.length === 0) {
        //   console.warn('no file!');
        //   return
        // }
        var that=this
       // 这里是OSS
        const client = new OSS.Wrapper({
          region: 'oss-cn-hangzhou', 
          accessKeyId: 'your access key',
          accessKeySecret: 'your access secret',
          bucket: 'your bucket name'
        });
        const fNum = this.files;
        for(var i=0;i<fNum.length;i++){
          var f=fNum[i].file
          console.log(f)
          const Name=f.name
          console.log(Name)
          const suffix = Name.substr(Name.indexOf("."));
          const obj=this.timestamp();
          const storeAs = 'header/'+obj+suffix // 路径+时间戳+后缀名
          console.log(storeAs)
          client.multipartUpload(storeAs, f).then(function (result){
            console.log(result.res.requestUrls)
          })
        }
      },
      // 时间戳
      timestamp:function(){ 
        const time = new Date(); 
        const y = time.getFullYear(); 
        const m = time.getMonth()+1; 
        const d = time.getDate(); 
        const h = time.getHours(); 
        const mm = time.getMinutes(); 
        const s = time.getSeconds(); 
        const ms = time.getMilliseconds() 
        return ""+y+this.Add0(m)+this.Add0(d)+this.Add0(h)+this.Add0(mm)+this.Add0(s)+this.Add0(ms); 
      },
      Add0:function(m){ 
        return m<10?'0'+m : m; 
      } ,

      finished() {
        this.files = []
        this.status = 'ready'
        
      },
      remove(index) {
        this.files.splice(index, 1)
      },
      fileChanged() {
        const list = this.$refs.file.files
        for (let i = 0; i < list.length; i++) {
          if (!this.isContain(list[i])) {
            const item = {
              name: list[i].name,
              size: list[i].size,
              file: list[i]
            }
            this.html5Reader(list[i], item)
            this.files.push(item)
          }
        }
        this.$refs.file.value = ''
      },
      // 将图片文件转成BASE64格式
      html5Reader(file, item){
        const reader = new FileReader()
        reader.onload = (e) => {
          this.$set(item, 'src', e.target.result)
        }
        reader.readAsDataURL(file)
      },
      isContain(file) {
       return this.files.find((item) => item.name === file.name && item.size === file.size)
      },
    }
  }
</script>
<style>
.vue-uploader {
  border: 1px solid #e5e5e5;
}
.vue-uploader .file-list {
  padding: 10px 0px;
}
.vue-uploader .file-list:after {
  content: '';
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
  font-size: 0;
}
.vue-uploader .file-list .file-item {
  float: left;
  margin-left: 10px;
  
  position: relative;
  width: 150px;
  text-align: center;
}
.vue-uploader .file-list .file-item img{
  width: 150px;
  height: 150px;
  border: 1px solid #ececec;
}
.vue-uploader .file-list .file-item .file-remove {
  position: absolute;
  right: 4px;
  display: none;
  top: 4px;
  width: 20px;
  height: 20px;
  font-size:20px;
  text-align: center;
  color: white;
  cursor: pointer;
  line-height: 20px;
  border-radius: 100%;
  transform: rotate(45deg);
  background: rgba(0, 0, 0, 0.5);
}
.vue-uploader .file-list .file-item:hover .file-remove {
  display: inline;
}
.vue-uploader .file-list .file-item .file-name {
  margin: 0;
  height: 40px;
  word-break: break-all;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.vue-uploader .add {
  width: 150px;
  height: 150px;
  float: left;
  text-align: center;
  line-height: 150px;
  font-size: 30px;
  cursor: pointer;
  background: url(../assets/upImg.png) no-repeat; // 这里使用的是我本地图片
  background-size: 100% 100%;
}
.vue-uploader .upload-func {
  display: flex;
  padding: 10px;
  margin: 0px;
  background: #f8f8f8;
  border-top: 1px solid #ececec;
}
.vue-uploader .upload-func .progress-bar {
  flex-grow: 1;
}
.vue-uploader .upload-func .progress-bar section {
  margin-top: 5px;
  background: #00b4aa;
  border-radius: 3px;
  text-align: center; 
  color: #fff;
  font-size: 12px;
  transition: all .5s ease;
}
.vue-uploader .upload-func .operation-box {
  flex-grow: 0;
  padding-left: 10px;
}
.vue-uploader .upload-func .operation-box button {
  padding: 4px 12px;
  color: #fff;
  background: #007ACC;
  border: none;
  border-radius: 2px;
  cursor: pointer;
}
.vue-uploader > input[type="file"] {
  display: none;
}
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
functional继承模式 摘自javascript:the good parts
Jun 20 Javascript
js中更短的 Array 类型转换
Oct 30 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
May 13 Javascript
jquery中change()用法实例分析
Feb 06 Javascript
JavaScript的9种继承实现方式归纳
May 18 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
Oct 09 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
Dec 13 Javascript
js实现自定义路由
Feb 04 Javascript
Node.js环境下Koa2添加travis ci持续集成工具的方法
Jun 19 Javascript
详解JSON Web Token 入门教程
Jul 30 Javascript
利用jsonp解决js读取本地json跨域的问题
Dec 11 Javascript
js核心基础之闭包的应用实例分析
May 11 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
Sep 27 #Javascript
详解关于vue2.0工程发布上线操作步骤
Sep 27 #Javascript
解决betterScroll在vue中存在图片时,出现拉不动的问题
Sep 27 #Javascript
Vue中的v-for指令不起效果的解决方法
Sep 27 #Javascript
在vue中使用v-bind:class的选项卡方法
Sep 27 #Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
Sep 27 #Javascript
详解如何在vue项目中使用lodop打印插件
Sep 27 #Javascript
You might like
php strcmp使用说明
2010/04/22 PHP
PHP反射类ReflectionClass和ReflectionObject的使用方法
2013/11/13 PHP
浅谈php+phpStorm+xdebug配置方法
2015/09/17 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
js 动态加载事件的几种方法总结
2013/12/25 Javascript
js报$ is not a function 的问题的解决方法
2014/01/20 Javascript
jquery等待效果示例
2014/05/01 Javascript
jQuery消息提示框插件Tipso
2015/05/04 Javascript
基于js实现投票的实例代码
2015/08/04 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
2015/08/17 Javascript
js编写贪吃蛇的小游戏
2020/08/24 Javascript
jQuery遮罩层效果实例分析
2016/01/14 Javascript
Node.js Addons翻译(C/C++扩展)
2016/06/12 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
2016/11/07 Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
2017/06/01 Javascript
jQuery Position方法使用和兼容性
2017/08/23 jQuery
微信小程序实现页面跳转传值以及获取值的方法分析
2017/12/18 Javascript
一种angular的方法级的缓存注解(装饰器)
2018/03/13 Javascript
jQuery选择器之基本过滤选择器用法实例分析
2019/02/19 jQuery
Vue的路由及路由钩子函数的实现
2019/07/02 Javascript
layui加载数据显示loading加载完成loading消失的实例代码
2019/09/23 Javascript
python实现字典(dict)和字符串(string)的相互转换方法
2017/03/01 Python
Python针对给定字符串求解所有子序列是否为回文序列的方法
2018/04/21 Python
浅谈python中字典append 到list 后值的改变问题
2018/05/04 Python
Python通过递归获取目录下指定文件代码实例
2019/11/07 Python
Python socket实现的文件下载器功能示例
2019/11/15 Python
Python数组并集交集补集代码实例
2020/02/18 Python
python的pip有什么用
2020/06/17 Python
python list的index()和find()的实现
2020/11/16 Python
举例详解HTML5中使用JSON格式提交表单
2015/06/16 HTML / CSS
单位单身证明范本
2014/01/11 职场文书
大学校园活动策划书
2014/02/04 职场文书
2014年实验室工作总结
2014/12/03 职场文书
2015年社区平安建设工作总结
2015/05/13 职场文书
Javascript中async与await的捕捉错误详解
2022/03/03 Javascript
MySQL实现配置主从复制项目实践
2022/03/31 MySQL