vue和element上傳圖片以及進行拖拽圖片排序問題

更新時間：2024年08月07日 09:21:34 作者：ing*_*

這篇文章主要介紹了vue和element上傳圖片以及進行拖拽圖片排序問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

需求場景

需求要求進行上傳圖片的同時進行排序，使用element的上傳圖片，拖拽使用的是vuedraggable的插件，記錄下

拖拽插件

插件中文翻譯git地址：https://github.com/itmier/Vue.Draggable，具體可去地址瀏覽

對vuedraggbale的插件進行安裝使用：

1.安裝插件

npm i -S vuedraggable

2.局部引入插件(在.vue的文件中)；

import draggable from 'uedraggbale'
components: {draggable},

3.使用插件

//imgList：圖片的數據數組，
<draggable v-model="imgList"
          :animation="1000">
   <div v-for="item in imgList" :key="item.id">{{item.name}}</div>
</draggable>

el-upload上傳文件組件

   // 配合element的本身的樣式，不用寫樣式。全部代碼
     <template>
  <div class='base-updata'>

    <div class="img-sort">
      <ul class="el-upload-list el-upload-list--picture-card">
        <draggable
          v-model="imgList"
          :animation="1000"
          :sort="true"
          v-if="showDraggable"
        >
          <li
            class="el-upload-list__item is-success animated"
            v-for="(item, index) in imgList"
            :key="index"
            style="margin-right:10px"
          >
            <img
              :src="item.url"
              alt=""
              class="el-upload-list__item is-success"
            >
          <!--   <i class="el-icon-close"></i> -->
            <span class="el-upload-list__item-actions">
              <!-- 預覽 -->
              <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(item)"
              >
                <i class="el-icon-zoom-in"></i>
              </span>
              <!-- 刪除 -->
              <span
                class="el-upload-list__item-delete"
                @click="handleRemove(index)"
                  v-if="!disabled">
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </li>
        </draggable>
        <template v-else>
          <li
            class="el-upload-list__item is-success animated"
            v-for="(item, index) in imgList"
            :key="index"
            style="margin-right:10px"
          >
            <img
              :src="item.url"
              alt=""
              class="el-upload-list__item is-success"
            >
            <i class="el-icon-close"></i>
            <span class="el-upload-list__item-actions">
              <!-- 預覽 -->
              <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(item)"
              
              >
                <i class="el-icon-zoom-in"></i>
              </span>
              <!-- 刪除 -->
              <span
                class="el-upload-list__item-delete"
                @click="handleRemove(index)"
                  v-if="!disabled"
              >
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </li>
        </template>
      </ul>
      <el-upload
        style="display: inline-block"
        ref="uploadFilemain"
        :show-file-list="false"
        :file-list="imgList"
        list-type="picture-card"
        :before-upload="beforeUpload"
        :http-request="(file, fileList) => requestImgHttps(file)"
        :on-preview="handlePictureCardPreview"
        :limit="limit"
        :disabled="disabled"
        :class="imgList.length == limit ? 'mf' : ''"
      >
        <!--            :disabled="optType == 'detail'" -->
        <i class="el-icon-plus"></i>
      </el-upload>
      <span style="position: relative; top: 116px; left: 10px">{{ imgList.length }} <span v-if="limit
      !=100">{{"/" + limit}}</span> <span v-if="showDraggable">（拖拽排序）</span></span>
    </div>
    <!-- 圖片預覽 -->
    <el-dialog :visible.sync="dialogVisible">
      <img
        width="100%"
        :src="dialogImageUrl"
        alt=""
      />
    </el-dialog>
  </div>
</template>

<script>
import draggable from "vuedraggable";

export default {
  name: "base-updata",
  components: {draggable},
  props: {
    //圖片列表
    imgList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    //是否顯示拖拽
    showDraggable: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
    //上傳圖片署名
    imgTypeName: {
      type: String,
      Request: true,
    },
    //上傳圖片下標
    imgTypeIdex: {
      type: Number,
      Request: true,
    },
    //圖片限制
    limit: {
      type: Number,
       default: () => {
        return 100;
      },
    },
    //圖片禁止
    disabled: {
      type: Boolean,
       default: () => {
        return false;
      },
    },
  },
  data() {
    return {
      dialogVisible: false, //圖片預覽
    };
  },
  created() {},
  mounted() {},
  methods: {
    //圖片上傳驗證
    beforeUpload(file) {
      return new Promise((resolve, reject) => {
        this.changeLimt(file).then((res) => {
          file.isFlag = res;
          if (file.isFlag) {
            return resolve(true);
          } else {
            return reject(false);
          }
        });
      });
    },
    changeLimt(file) {
      const _this = this;
      const isSize = new Promise(function (resolve, reject) {
        const _URL = window.URL || window.webkitURL;
        const img = new Image();
        img.src = _URL.createObjectURL(file);
        img.onload = function () {
          let e_width = img.width >= 600 && img.width <= 1200;
          let e_height = img.height >= 600 && img.height <= 1200;
          if (file.type == "image/png" || file.type == "image/jpg" || file.type == "image/jpeg") {
            const valid = e_width && e_height;
            if (valid) {
              return resolve();
            } else {
              return reject();
            }
          } else {
            return reject();
          }
        };
      }).then(
        () => {
          return true;
        },
        () => {
          _this.$message.warning({
            message: "圖片規(guī)格為jpg或png，建議形狀正方形，尺寸建議800*800像素，最大支持1200*1200像素",
            btn: false,
          });
          return false;
        }
      );

      return isSize;
    },
    //預覽
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //刪除
    handleRemove(index) {
      this.$emit("handleRemove", this.imgTypeName, index);
    },
    /**
     * 上傳圖片 請求
     * @param {string} file 圖片文件
     * @param {string} imgTypeName 圖片署名
     * @param {string} imgTypeIdex 圖片位置下標
     * @return {Function} 拋出函數requestImgHttps
     */
    requestImgHttps(file) {
      this.$emit("requestImgHttps", file, this.imgTypeName, this.imgTypeIdex);
    },
  },
};
</script>

<style lang='scss' scoped>
.img-sort {
  display: flex;
  flex-wrap: wrap;
}
.mf {
  ::v-deep .el-upload--picture-card {
    display: none !important;
  }
}
</style>

使用組件

        <el-form-item label="商品輪播圖：" prop="images_circulate" >
          <upload-img
            :imgList="formInfo.images_circulate"
            :limit="5"
            :showDraggable="true"
            :imgTypeName="`swiperImg`"
            @handleRemove="handleRemove"
            @requestImgHttps="requestImgHttps"
            :disabled="$route.query.type == 3?true:false"
          ></upload-img>
        </el-form-item>

    //圖片刪除
    handleRemove(type, index) {
      switch (type) {
        //輪播圖刪除
        case "swiperImg":
          this.formInfo.images_circulate.splice(index, 1);
          break;
        default:
          break;
      }
    },
    //圖片上傳
    requestImgHttps(file, key, index) {
      var formdata = new FormData();
      formdata.append("img", file.file);
      switch (key) {
        case "mainImg":
          this.uploadFile(formdata).then((res) => {
            if (res.code == 200) {
              let ob = { name: "xxx.jpg", url: res.data };
              this.formInfo.image_main.push(ob);
            } else {
              thi s.$message({
                  type: "warning",
                  message: res.msg,
                });
            }
          });
          break;
        default:
          break;
      }
    },