Vue.js로 파일을 업로드하는 것은 - 그리고 미리 보기 기능도 실현된다면 -

파일 업로드 구성 요소 만들기

처음부터 고민한 결과 목표물이 완성되면 출력한다.

☆Special thanks☆

・"file" 단추 디자인 변경 방법
・자바스크립트로 바이트 (bytes) 단위로 문자열을 생략하는 방법

처음으로 창립하다

index.vue

<template>
  <div>
    <label>
      <input type="file" placeholder="何でやねん" />
    </label>
  </div>
</template>

이것은 실행해 보면

기본 재생 폴더를 변경하려면

ファイルを選択의 곳.
왜 그랬을까
표시되지 않은 것 같습니다.
이것은 자유를 바꿀 수 없습니까?이렇게 고민하면잘못 쓰다.
placeholder는 input에 적힌 것이 아닌 것 같다.
기본 스타일을 수정하려면
index.vue

<label>画像を選択
  <input />
</label>

이렇게 하면 label 탭에 추가해서 표시됩니다.
(클릭하면 선택처럼 파일을 이동할 수 있어 문제없다)

어, ファイルを選択する 아직 안 사라졌어?
이렇게 생각하면서 조사해봤는데 전자지갑을 변경했다기보다는
원래 디자인이 없어서 다시 만들었다는 인상인 것 같아요.ファイル選択 선택 안 함
필요하지 않은 부분을 삭제하기 위해서는 스타일만 사용할 수 있습니다.

display: none;스타일 삭제, label에 새 스타일 추가

index.vue

<template>
  <div class="input-item">
    <label class="input-item__label">
      画像を選択
      <input type="file" />
    </label>
  </div>
</template>


<style>
label > input {
  display: none;
}

label {
  padding: 0 1rem;
  border: solid 1px #888;
} 

label::after {
  content: '+';
  font-size: 1rem;
  color: #888;
  padding-left: 1rem;
}
</style>

좀 못생겼지만 다 했어요.

어렵게 선택한 이미지를 미리 볼 수 있는 기능을 설정합니다.

이미지를 선택한 경우 다음 이미지와 같이 선택한 이미지와 이미지 파일 이름을 미리 보기 기능을 사용하여 표시할 수도 있습니다.

하고 싶은 게 다섯 가지가 있어요.
• 선택한 이미지 표시
• 선택한 이미지 파일 이름 표시
• 이미지 표시 후 이미지 선택 버튼이 사라짐
• 이미지 파일 이름 표시
・ 이미지 파일의 close를 클릭한 후 다시 画像を選択 단추 보이기

선택한 그림의 표시 위치와 표시 methods 설치

index.vue

<template>
  <div class="contents">
    <label v-show="!uploadedImage" class="input-item__label"
      >画像を選択
      <input type="file" @change="onFileChange" />
    </label>
    <div class="preview-item">
      <img
        v-show="uploadedImage"
        class="preview-item-file"
        :src="uploadedImage"
        alt=""
      />
      <div v-show="uploadedImage" class="preview-item-btn" @click="remove">
        <p class="preview-item-name">{{ img_name }}</p>
        <e-icon class="preview-item-icon">close</e-icon>
      </div>
    </div>
  </div>
</template>

<script>
import EIcon from '../components/EIcon.vue';

export default {
  components: {
    EIcon,
  },
  data() {
    return {
      uploadedImage: '',
      img_name: '',
    };
  },
  methods: {
    onFileChange(e) {
      const files = e.target.files || e.dataTransfer.files;
      this.createImage(files[0]);
      this.img_name = files[0].name;
    },
    // アップロードした画像を表示
    createImage(file) {
      const reader = new FileReader();
      reader.onload = e => {
        this.uploadedImage = e.target.result;
      };
      reader.readAsDataURL(file);
    },
    remove() {
      this.uploadedImage = false;
    },
  },
};
</script>

이렇게 되면
• 선택한 이미지 표시
• 선택한 이미지 파일 이름 표시
• 이미지 표시 후 이미지 선택 버튼이 사라짐
• 이미지 파일 이름 표시
・ 이미지 파일의 close를 클릭한 후 다시 画像を選択 단추 보이기
사실 이 다섯 개는 이미 설치되어 있지만, 지금은 긴 파일 이름이라면 되돌아와 디자인이 변형된다.

위에서 말한 바와 같이 파일 이름이 길면 디자인이 변형되기 때문에 가능한 한 짧게 자르고 디자인이 변형되지 않도록 하겠습니다.

3점 리더, 확장자 보존, 전각, 반각의 판별 조합이 파일 이름 표시에 공을 들인다

onFileChange(e) {
      const files = e.target.files || e.dataTransfer.files;
      this.createImage(files[0]);
      // 拡張子で分ける（※.が1つの想定です）
      const imgNameExe = files[0].name.split('.');

      // 拡張子から前
      let imgName = imgNameExe[0];

      // 拡張子から後ろ
      const imgExe = imgNameExe[1];

      // 表示したいMaxのByte数（全角10文字、半角20文字）
      const maxBytes = 20;
      const imgNameBytes = encodeURIComponent(imgName).replace(/%../g, 'x').length;

      // 画像ファイルとMax Byte数の比較
      if (imgNameBytes > maxBytes) {
        const zenkaku = imgNameBytes - imgName.length;
        if (zenkaku > 0) {
          imgName = imgName.slice(0, maxBytes / 2 - imgName.length) + '..';
        } else {
          imgName = imgName.slice(0, maxBytes - imgNameBytes) + '..';
        }
      }

      // 短くカットしたものと.と拡張子の文字列の連結
      imgName = imgName + '.' + imgExe;
      this.img_name = imgName;
    },

이렇게 이루어졌다.

현재 긴 파일 이름은 XXX를 나타냅니다...png 등의 표시이지만 아마 XXX...XXX.png처럼 파일 이름의 시작과 끝에 공을 들여야 한다.
하지만 이번엔 여기까지!