upload

src/components/midjourney/ReferenceImage.vue

@@ -3,46 +3,74 @@
     <el-upload
       v-model:file-list="fileList"
       class="upload-demo"
-      action="https://data.zhishuyun.com/api/v1/images/"
-      :on-success="handleSuccess"
+      name="image"
+      :limit="5"
+      :multiple="true"
+      action="/api/v1/images/"
       list-type="picture"
+      :on-exceed="onExceed"
+      :on-error="onError"
       :headers="headers"
     >
-      <el-button type="primary">Click to upload</el-button>
+      <el-button type="primary">
+        <font-awesome-icon icon="fa-solid fa-upload" class="icon mr-2" />
+        {{ $t('midjourney.button.uploadReferences') }}
+      </el-button>
       <template #tip>
-        <div class="el-upload__tip">jpg/png files with a size less than 500kb</div>
+        <div class="el-upload__tip">
+          {{ $t('midjourney.description.uploadReferences') }}
+        </div>
       </template>
     </el-upload>
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent } from 'vue';
-import { ElUpload, ElButton } from 'element-plus';
+import { ElUpload, ElButton, UploadFiles, UploadFile, ElMessage } from 'element-plus';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+
+interface IData {
+  fileList: UploadFiles;
+}
+
 export default defineComponent({
   name: 'ReferenceImage',
   components: {
     ElUpload,
-    ElButton
+    ElButton,
+    FontAwesomeIcon
   },
-  props: {
-    modelValue: {
-      type: String,
-      default: undefined
-    }
+  emits: ['change'],
+  data(): IData {
+    return {
+      fileList: []
+    };
   },
-  data() {},
   computed: {
     headers() {
       return {
         Authorization: `Bearer ${this.$store.state.token.access}`
       };
+    },
+    urls() {
+      // @ts-ignore
+      return this.fileList.map((file: UploadFile) => file?.response?.image_url);
+    }
+  },
+  watch: {
+    urls: {
+      handler(val) {
+        this.$emit('change', val);
+      }
     }
   },
-  mounted() {},
   methods: {
-    handleSuccess(response) {
-      console.log('response', response);
+    onExceed() {
+      ElMessage.warning(this.$t('midjourney.message.uploadReferencesExceed'));
+    },
+    onError() {
+      ElMessage.error(this.$t('midjourney.message.uploadReferencesError'));
     }
   }
 });

src/i18n/zh/midjourney/button.ts

@@ -1,3 +1,4 @@
 export default {
-  buyMore: '购买更多'
+  buyMore: '购买更多',
+  uploadReferences: '上传参考图'
 };

src/i18n/zh/midjourney/description.ts

@@ -19,5 +19,6 @@ export default {
   weird: '探索带有实验性质的不常见美学风格，范围为 0-3000，默认为 0',
   translation: '在生成过程中启用自动翻译，输入为非中文内容时会自动翻译为英文输入给 Midjourney',
   imageWeight: '调整图像提示相对于文本提示的权重，范围为 0-2，默认为 1',
-  niji: '启用此开关后，生成的图像将使用 Niji 模型，生成动漫风格的图片'
+  niji: '启用此开关后，生成的图像将使用 Niji 模型，生成动漫风格的图片',
+  uploadReferences: '上传图片作为生成的参考，支持最多 5 张图片。如果上传的图片数量超过 1 张，将会自动融合'
 };

src/i18n/zh/midjourney/message.ts

@@ -1,3 +1,5 @@
 export default {
-  promptPlaceholder: '请输入一句话来描述你想要生成的图片，例如：一只好看的猫'
+  promptPlaceholder: '请输入一句话来描述你想要生成的图片，例如：一只好看的猫',
+  uploadReferencesExceed: '最多只能上传 5 张图片',
+  uploadReferencesError: '上传图片失败，请稍后重试'
 };

src/pages/midjourney/Index.vue

@@ -4,9 +4,9 @@
       <preset-panel v-model="preset" />
     </div>
     <div class="main">
-      <reference-image class="mb-4" />
       <channel-selector v-model="channel" class="mb-4" @select="onSelectChannel" />
       <api-status :application="application" class="mb-4" />
+      <reference-image class="mb-4" @change="references = $event" />
       <prompt-input v-model="prompt" class="mb-4" />
       <elements-selector v-model="elements" :advanced="preset.advanced" class="mb-4" />
       <ignore-selector v-if="preset.advanced" v-model="ignore" class="mb-4" />
@@ -56,6 +56,7 @@ interface IData {
   initializing: boolean;
   applied: boolean | undefined;
   applications: IApplication[];
+  references: string[];
   task: IMidjourneyImagineTask | undefined;
 }
 
@@ -83,7 +84,8 @@ export default defineComponent({
       ignore: '',
       initializing: false,
       applied: undefined,
-      task: undefined
+      task: undefined,
+      references: []
     };
   },
   computed: {

src/plugins/font-awesome.ts

@@ -8,6 +8,7 @@ import {
 } from '@fortawesome/free-regular-svg-icons';
 import {
   faMicrophone as faSolidMicrophone,
+  faUpload as faSolidUpload,
   faInfo as faSolidInfo,
   faStop as faSolidStop,
   faWandMagicSparkles as faSolidWandMagicSparkles,
@@ -42,6 +43,7 @@ library.add(faSolidGear);
 library.add(faSolidMicrophone);
 library.add(faSolidBars);
 library.add(faSolidPlus);
+library.add(faSolidUpload);
 library.add(faSolidQuestion);
 library.add(faSolidStop);
 library.add(faSolidTriangleExclamation);