vue 文件流获取图片名

在Vue中获取文件流的图片名可以通过以下步骤实现：

1. 首先，你需要在Vue组件中添加一个文件选择的input元素，用于选择图片文件：

<input type="file" ref="fileInput" @change="handleFileChange">

2. 在Vue组件的methods中，定义一个方法来处理文件选择的change事件：

methods: {
  handleFileChange(event) {
    const file = event.target.files[0];
    this.fileName = file.name;
  }
}

3. 在Vue组件的data中，定义一个变量来存储文件名：

data() {
  return {
    fileName: ''
  }
}

4. 最后，在Vue组件的模板中，可以通过绑定数据的方式来显示文件名：

<p>文件名：{{ fileName }}</p>

这样，当用户选择了一个图片文件后，文件名就会显示在页面上。

相关问题

vue-cropper获取文件流

在Vue中使用vue-cropper插件获取文件流的步骤如下：

1. 在Vue项目中安装vue-cropper插件：使用npm或yarn命令安装插件，例如：`npm install vue-cropper`

2. 在需要使用cropper的组件中引入vue-cropper：在组件的script标签中添加以下代码：

   import Cropper from 'vue-cropper'

3. 注册vue-cropper组件：在组件的components选项中注册vue-cropper组件，例如：

   components: {
     'vue-cropper': Cropper
   }

4. 在组件的template中使用vue-cropper：添加以下代码来使用vue-cropper组件，并绑定相关属性和方法：

   <vue-cropper ref="cropper" :src="imageSrc" :outputSize="outputSize" @crop="onCrop"></vue-cropper>

5. 在组件的data选项中定义相关属性和方法：

   data() {
     return {
       imageSrc: '', // 用于绑定图片源
       outputSize: { // 用于设置输出图片大小
         width: 100,
         height: 100
       }
     }
   },
   methods: {
     onCrop(data) { // 处理裁剪后的图片数据
       console.log(data)
     }
   }

6. 使用vue-cropper的API获取文件流：通过调用vue-cropper的API可以获取文件流，例如：

   const cropper = this.$refs.cropper
   const imageData = cropper.getCroppedCanvas().toDataURL('image/jpeg')
   console.log(imageData)

注意：在以上代码中，`imageSrc`用于绑定图片源，`outputSize`用于设置输出图片的大小，`onCrop`为裁剪完成后的回调函数，可以在该函数中处理裁剪后的图片数据。

vue-cropperjs 获取剪辑后的图片格式如何转为文件流的形式

将 base64 格式的字符串转换为文件流的形式，可以借助 Blob 对象实现。Blob 对象表示一个不可变、原始数据的类文件对象，可以使用它来存储二进制数据。具体步骤如下：

1. 将 base64 格式的字符串转换为二进制数据。可以使用 atob() 方法将 base64 字符串解码为二进制数据。

const binaryStr = atob(dataUrl.split(',')[1]);

2. 创建一个 Uint8Array 对象来存储二进制数据。

const len = binaryStr.length;
const bytes = new Uint8Array(len);
for (let i = 0; i < len; i++) {
  bytes[i] = binaryStr.charCodeAt(i);
}

3. 使用 Blob 对象将二进制数据转换为文件流的形式。

const blob = new Blob([bytes], { type: 'image/png' });

完整代码如下：

<template>
  <vue-cropper
    ref="cropper"
    ...
    @cropped="getCroppedData"
  />
</template>

<script>
export default {
  methods: {
    getCroppedData(dataUrl) {
      const binaryStr = atob(dataUrl.split(',')[1]);
      const len = binaryStr.length;
      const bytes = new Uint8Array(len);
      for (let i = 0; i < len; i++) {
        bytes[i] = binaryStr.charCodeAt(i);
      }
      const blob = new Blob([bytes], { type: 'image/png' });
      console.log(blob);
      // blob 即为剪辑后的图片数据，格式为文件流的形式
    }
  }
}
</script>

注意：在使用 Blob 对象时，需要指定 MIME 类型。可以根据剪辑后的图片格式来确定 MIME 类型，例如上面示例中使用的是 `image/png`。