vue完整上传图片(阿里云OSS)

最新推荐文章于 2024-07-29 23:56:27 发布

修罗_

最新推荐文章于 2024-07-29 23:56:27 发布

阅读量4.7k

点赞数 1

分类专栏： VUE 文章标签： javascript vue.js ajax

本文链接：https://blog.csdn.net/weixin_45843676/article/details/123824744

版权

1.简略的布局(样式以去除)，左边是图片浏览，右边是一个input和一个span，当然span是可以自己去设计的，input是隐藏的通过点击外层div来触发它的onclick事件

		  <!--这里展示大图-->
		  <div class="full_image" v-if="full_image">
      			<img :src="full_image" style="border-radius:3px">
      			<span style="position:absolute;right:10px;top:8px;font-size:16px;font-weight:400;cursor:pointer;user-select:none" @click="full_image=''">X</span>
    	  </div>
    	  <!--上传图片-->
          <div >
          <!--缩略图-->
            <div  v-if="images">
              <img :src="image.url" v-for="(image,index) in images" :key="index" @click="showImage" :data-url="image.url+''" style="cursor:pointer;">
            </div>
            <!--上传图片-->
            <div  @click="uploadImage">
              <div style="width:80px;height:80px">
                <input type="file" ref="image_input" accept=".png,.jpg,.jpeg" @change=