vue 使用imgFile

Vue.js 通常与 Vue CLI 一起使用，可以使用以下步骤将图片文件添加到 Vue.js 项目中：

1. 在项目中创建一个名为 assets 的文件夹，并将图片文件放入其中。

2. 在 Vue 组件中使用 require() 导入图片：

   <template>
     <div>
       <img :src="image" alt="My Image">
     </div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         image: require('@/assets/my-image.png')
       }
     }
   }
   </script>
   

   或者，可以在 computed 中定义一个计算属性来获取图片：

   <template>
     <div>
       <img :src="imageUrl" alt="My Image">
     </div>
   </template>
   
   <script>
   export default {
     computed: {
       imageUrl() {
         return require('@/assets/my-image.png')
       }
     }
   }
   </script>
   

   注意：在使用 require() 导入图片时，路径应该以 @ 开头，表示项目根目录。

3. 在浏览器中打开页面，应该能够看到图片显示在页面上了。

4. 在需要上传图片的组件中，可以使用 input[type=file] 元素来选择图片文件。可以使用 @change 事件监听文件选择操作，并将选中的文件传递给上传函数：

   <template>
     <div>
       <input type="file" @change="onFileChange">
       <button @click="upload">Upload</button>
     </div>
   </template>
   
   <script>
   export default {
     methods: {
       onFileChange(e) {
         const file = e.target.files[0]
         this.image = file
       },
       upload() {
         // 上传图片的逻辑
       }
     }
   }
   </script>
   

   在这个例子中，onFileChange 方法将选中的文件赋值给组件的 image 数据属性。在上传函数中，可以使用 FormData 对象来发送文件数据到服务器。