function-try-block 相关问题


Pinia 对象在 Vue 中的 foreach 后失去反应性

我有这个嵌套的foreach BalanceItemList.vue ... 我有这个嵌套的 foreach BalanceItemList.vue <template> <div v-for="category in categoryItemsStore.balanceCategories" :key="category.id" class="mt-5"> <div class="border-black border-b bg-gray-200"> <span class="font-bold w-full">{{ category.name }}</span> </div> <div v-for="balanceItem in category.balance_items" :key="balanceItem.id"> {{ balanceItem.total = 500 }} <balance-item :balance-item="balanceItem" @update-balance-item="update"/> </div> <div> <balance-item-create :category="category.id" @create-balance-item="update"/> </div> <div v-if="categoryItemsStore.totals[category.id]" class="grid grid-cols-4-b t-2 ml-2"> <div :class="category.is_positive ? '': 'text-red-600' " class="col-start-4 border-t-2 border-black font-bold"> &euro;{{ categoryItemsStore.totals[category.id].total }} </div> </div> </div> </template> 我像这样检查了“balanceItem”的反应性 {{ balanceItem.total = 500 }} 它在商店中更新,但随后我有了我的平衡项目组件: BalanceItem.vue <script setup> import {reactive} from "vue"; import {useForm} from "@inertiajs/vue3"; import NumberInput from "@/Components/NumberInput.vue"; import {UseCategoryItemsStore} from "@/Stores/UseCategoryItemsStore.js"; const categoryItemStore = UseCategoryItemsStore() const props = defineProps({balanceItem: Object, errors: Object}) let item = reactive(props.balanceItem); const form = useForm(item); const emit = defineEmits(['update-balance-item']) const submit = () => { form.post(route('balance-item.update'), { preserveScroll: true, onSuccess: () => { props.balanceItem.total = 500 categoryItemStore.updateBalanceItemsTotals(form) emit('update-balance-item') } }) } </script> <template> <form @submit.prevent="submit"> <div class="grid grid-cols-4-b"> <span>{{ item.name }}</span> <NumberInput v-model="form.count" autofocus class=" mr-4 mt-1 block" type="number" @update:model-value="submit" /> <div :class="item.item_category.is_positive ? '' : 'text-red-600'" class="flex place-items-center"> <div class="pt-1 mr-1">&euro;</div> <NumberInput v-model="form.amount" :class="form.errors.amount ? 'border-red-600' : ''" autofocus class="mt-1 mr-4 w-5/6" type="text" @update:model-value="submit" /> </div> <div :class="item.item_category.is_positive ? '' : 'text-red-600'" class="flex place-items-center"> <div class="pt-1 mr-1 w-5/6">&euro;</div> <NumberInput v-model="form.total" autofocus class="mt-1 block" disabled style="max-width: 95%" type="text" /> </div> </div> </form> </template> 这是我测试反应性的商店。如果我增加输入的数字,则项目的计数保持不变 UseCategoryItemsStore.js import {defineStore} from "pinia"; import {ref} from "vue"; export const UseCategoryItemsStore = defineStore('UseCategoryItemsStore', () => { const balanceCategories = ref([]) const totals = ref([]) function getBalanceItems() { axios.get(route('balance-item.index')).then((response) => { balanceCategories.value = response.data // console.log(balanceCategories.value) }) } function getTotals() { axios.get(route('balance-item.totals')).then((response) => totals.value = response.data) } function getData() { getTotals() getBalanceItems() } function updateBalanceItemsTotals(selectedItem) { balanceCategories.value.forEach((category) => { category.balance_items.forEach((item) => { if (item.id === selectedItem.id) { // item.total = item.count * item.amount console.log(item) } }) }) } getTotals() getBalanceItems() return {balanceCategories, totals, getBalanceItems, getTotals, getData, updateBalanceItemsTotals} }) 在此测试中,我执行“props.balanceItem.total = 500”。但如果我检查商店,它不会更新。看来将“balanceItem”分配给一个道具会失去与我的 Pinia 商店的反应性。我可以使用“form.total = form.count * form.amount”手动更新我的表单,但这对我来说似乎很老套,我想使用 Pinia 商店的反应性。我考虑过根据“BalanceItem”获取 Pina 项目,但这似乎也很棘手。谁知道为什么失去反应性? 我有laravel 10.39、vue3.2.41和pinia 2.1.17惯性0.6.11。到目前为止我知道的所有最新版本。 我像这样更新我的表格和商店: <script setup> import {useForm} from "@inertiajs/vue3"; import NumberInput from "@/Components/NumberInput.vue"; import {UseCategoryItemsStore} from "@/Stores/UseCategoryItemsStore.js"; const categoryItemStore = UseCategoryItemsStore() const props = defineProps({balanceItem: Object, errors: Object}) let item = categoryItemStore.getItemById(props.balanceItem); let form = useForm(item); const emit = defineEmits(['update-balance-item']) const submit = () => { form.post(route('balance-item.update'), { preserveScroll: true, onSuccess: () => { item = categoryItemStore.updateItem(form) form = useForm(item) emit('update-balance-item') } }) } </script> 我将此功能添加到我的商店: import {defineStore} from "pinia"; import {ref} from "vue"; export const UseCategoryItemsStore = defineStore('UseCategoryItemsStore', () => { const balanceCategories = ref([]) const totals = ref([]) function getBalanceItems() { axios.get(route('balance-item.index')).then((response) => { balanceCategories.value = response.data // console.log(balanceCategories.value) }) } function getItemById(item) { let category = balanceCategories.value.find((category) => { return category.id === item.item_category_id }) return category.balance_items.find((item_from_store) => { return item_from_store.id === item.id }) } function updateItem(form) { const item = getItemById(form) item.count = form.count item.amount = form.amount item.total = item.count * item.amount return item } function getTotals() { axios.get(route('balance-item.totals')).then((response) => totals.value = response.data) } function getData() { getTotals() getBalanceItems() } getTotals() getBalanceItems() return {balanceCategories, totals, getBalanceItems, getTotals, getData, getItemById, updateItem} }) 假设如果帖子获得 200,我的表单值可用于更新商店和更新表单。这是我能想到的最好的


在 Swift 中,在 try-catch 或 do-catch 中声明的 defer 语句何时执行

defer 语句应该在声明它的块之后执行。如果 defer 语句是在 try-catch 的 try 块或 do-catch 的 do 块内声明的,那么它会


如何将“block”元素分组到“<p class="p">”元素中?

我想将 元素分组到 元素内部。如果 follow-sibling[1] 是 元素并且 我想将 <block> 元素分组到 <p class="p"> 元素内部。如果 <p class="p"> follow-sibling[1] 是 <block> 元素且 <p class="p1"> 值位于 <p class="p"> 元素中。 输入XML文件-: <root> <p class="p">aaaaaa</p> <block> <p>block</p> </block> <p class="p1"> bbb </p> <block> <p>block</p> </block> <p class="p1">bbb.</p> <p class="p">cccc</p> </root> 我想要下面的预期输出。 输出XML文件: <root> <p class="p">aaaaaa<block><p>block</p></block> bbb <block><p>block</p></block>bbb.</p> <p class="p">cccc</p> </root> 我们能否以另一种方式将逻辑纠正到输出上方,我在输出上方使用 XSLT: <xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template> <xsl:template match="p[@class='p']"> <xsl:choose> <xsl:when test="following-sibling::*[1][self::block]"> <xsl:text disable-output-escaping="yes">&lt;p&gt;</xsl:text> <xsl:apply-templates/> </xsl:when> <xsl:otherwise> <p><xsl:apply-templates select="@*|node()"/></p> </xsl:otherwise> </xsl:choose> </xsl:template> <xsl:template match="p[@class='p1']"> <xsl:choose> <xsl:when test="following-sibling::*[1][self::p[@class='p']]"> <xsl:apply-templates/> <xsl:text disable-output-escaping="yes">&lt;/p&gt;</xsl:text> </xsl:when> <xsl:otherwise> <xsl:apply-templates/> </xsl:otherwise> </xsl:choose> </xsl:template> 以下内容似乎包装/分组了输入示例的正确节点,但我不确定它是否实现了您的要求,我还不太理解它们。 <xsl:template match="root"> <xsl:copy> <xsl:for-each-group select="*" group-starting-with="p[@class = 'p']"> <xsl:copy> <xsl:apply-templates select="node(), current-group() except ."/> </xsl:copy> </xsl:for-each-group> </xsl:copy> </xsl:template>


Laravel 购物车页面,表单内有一个表单,用于处理删除和提交数据更新数据库

我有一个购物车页面,表格内有一个表格,也许你可以建议我应该做什么? 根据图片,我给出的蓝色圆圈是一个表格 我的刀片代码 我有一个购物车页面,表格内有一个表格,也许你可以建议我应该做什么?根据图片我给出的蓝色圆圈是一个表格我的刀片代码<table class="table"> <thead> <tr> <th scope="col">No</th> <th scope="col">Nama Barang</th> <th scope="col">Quantity</th> <th scope="col">Action</th> </tr> </thead> <tbody> @php $no = 1; @endphp @forelse ($permintaans as $b) <tr> <td>{{ $no ++ }}</td> <td> {{ $b->nama_kategori }} {{ $b->nama_atk }} </td> <td> <form action="{{ route('permintaan.update', $b->id) }}" method="POST" style="display: inline-block;"> @csrf @method('PUT') <div class="input-group input-group-sm mb-3"> <input type="number" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm" name="satuan_permintaan" min="0" max={{ $b->stok }} required> <span class="input-group-text" id="inputGroup-sizing-sm">{{ $b->subsatuan_atk }}</span> </div> </td> <td> <form action="{{ route('permintaan.destroy', $b->id) }}" method="POST" style="display: inline-block;"> @csrf @method('DELETE') <button type="submit" class="btn custom2-btn"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="red" class="bi bi-trash" viewBox="0 0 16 16"> <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"/> <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"/> </svg></button> </form> </td> </tr> @empty @endforelse </tbody> </table> 我的控制器public function store(Request $request) { $task = new Permintaan(); $task->atk_id = $request->input('atk_id'); $task->proses = 'Proses'; if (Permintaan::where('atk_id', $task->atk_id)->exists()){ return redirect('/atk/permintaan')->with(['info' => 'ATK Sudah Dalam Permintaan']); } else{ $task->save(); return redirect()->route('permintaan.index'); } } public function destroy($id) { $permintaan = Permintaan::find($id); $permintaan->delete(); return redirect()->route('permintaan.index'); } 我要处理删除并提交数据更新数据库 在开始销毁表单之前关闭更新表单第一个表单标签(缺少)。


如何使用 JS 延迟加载新的 Google Adsense 代码

谷歌已取代 <question vote="1"> <p>谷歌已取代 <br/></p> <p><pre><code>&lt;script async src=&#34;https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js&lt;/script&gt;</code></pre> <br/></p> <p>与<br/></p> <p><pre><code>&lt;script async src=&#34;https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456&#34; crossorigin=&#34;anonymous&#34;&lt;/script&gt;</code></pre> <br/></p> <p><strong>参考</strong>:<a href="https://support.google.com/adsense/answer/10627874" rel="nofollow noreferrer">Google Adsense 公告</a><br/></p> <p><strong>旧的 Adsense 代码就像:</strong></p> <pre><code>&lt;script async src=&#34;https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX&#34; crossorigin=&#34;anonymous&#34;&gt;&lt;/script&gt; &lt;ins class=&#34;adsbygoogle&#34; style=&#34;display:inline-block;width:350px;height:90px&#34; data-ad-client=&#34;ca-pub-XXXXXXXXXXXXXXXX&#34; data-ad-slot=&#34;XXXXXXXXXX&#34;&gt;&lt;/ins&gt; &lt;script&gt; (adsbygoogle = window.adsbygoogle || []).push({}); &lt;/script&gt; </code></pre> <p><strong>新的 Adsense 代码如下:</strong></p> <pre><code>&lt;script async src=&#34;https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX&#34; crossorigin=&#34;anonymous&#34;&gt;&lt;/script&gt; &lt;ins class=&#34;adsbygoogle&#34; style=&#34;display:inline-block;width:350px;height:90px&#34; data-ad-client=&#34;ca-pub-XXXXXXXXXXXXXXXX&#34; data-ad-slot=&#34;XXXXXXXXXX&#34;&gt;&lt;/ins&gt; &lt;script&gt; (adsbygoogle = window.adsbygoogle || []).push({}); &lt;/script&gt; </code></pre> <p><strong>页面加载完成后加载广告的旧 JS 代码是:</strong></p> <pre><code> &lt;script type=&#34;text/javascript&#34;&gt; function downloadJSAtOnload() { var element = document.createElement(&#34;script&#34;); element.src = &#34;https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js&#34;; document.body.appendChild(element); } if (window.addEventListener) window.addEventListener(&#34;load&#34;, downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent(&#34;onload&#34;, downloadJSAtOnload); else window.onload = downloadJSAtOnload; &lt;/script&gt; </code></pre> <p>由于在新广告代码的脚本标签中添加了<pre><code>?client=ca-pub-xxxxxx&#34; crossorigin=&#34;anonymous&#34;</code></pre>,那么现在加载广告的新JS代码是什么?</p> </question> <answer tick="true" vote="1"> <p>嗯,这并不是真正的延迟加载,这是延迟加载,不推荐,但你就可以了</p> <pre><code>&lt;script&gt; function downloadJSAtOnload() { var element = document.createElement(&#34;script&#34;); element.src = &#34;https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX&#34;; element.async = true; element.setAttribute(&#39;crossorigin&#39;, &#39;anonymous&#39;); document.body.appendChild(element); } if (window.addEventListener) window.addEventListener(&#34;load&#34;, downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent(&#34;onload&#34;, downloadJSAtOnload); else window.onload = downloadJSAtOnload; &lt;/script&gt; </code></pre> <p>如果您正在寻找延迟加载 AdSense,请查看 <a href="https://www.guest.blog/post/12068/lazy-loading-adsense-ads/" rel="nofollow noreferrer">延迟加载 Adsense</a></p> </answer> <answer tick="false" vote="0"> <blockquote> <h2>引用的标题##<script async</h2> <p>src="https://pagead2.googlesyndicate.com/pagead/js/adsbygoogle.js?client=ca-pub-1049121221402917" 跨桥=“匿名”></p> </blockquote> </answer> </body></html>


在Java中将流转换为字符串

我想将 Map<> 的流转换为字符串,并将其附加到文本区域。我尝试了一些方法,最后一个使用 StringBuilder,但它们不起作用。 公开 我想将 Map<> 的流转换为字符串,并将其附加到文本区域。我尝试了一些方法,最后一个使用 StringBuilder,但它们不起作用。 public <K, V extends Comparable<? super V>> String sortByAscendentValue(Map<K, V> map, int maxSize) { StringBuilder sBuilder = new StringBuilder(); Stream<Map.Entry<K,V>> sorted = map.entrySet().stream() .sorted(Collections.reverseOrder(Map.Entry.comparingByValue())); BufferedReader br = new BufferedReader(new InputStreamReader((InputStream) sorted)); String read; try { while ((read=br.readLine()) != null) { //System.out.println(read); sBuilder.append(read); } } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } sorted.limit(maxSize).forEach(System.out::println); return sBuilder.toString(); } 您可以将条目收集到一个String中,如下所示: String sorted = map.entrySet().stream() .sorted(Collections.reverseOrder(Map.Entry.comparingByValue())) .map(e-> e.getKey().toString() + "=" + e.getValue().toString()) .collect(Collectors.joining (",")); 考虑对 @Eran 的代码进行轻微更改,因为 HashMap.Entry.toString() 已经通过 = 为您加入了: String sorted = map.entrySet().stream() .sorted(Collections.reverseOrder(Map.Entry.comparingByValue())) .map(Objects::toString) .collect(Collectors.joining(",")); 这很容易做到,您可以使用 Steams API 来做到这一点。首先,将映射中的每个条目映射到单个字符串 - 键和值的连接字符串。一旦你有了这个,你就可以简单地使用 reduce() 方法或 collect() 方法来做到这一点。 使用“reduce()”方法的代码片段将如下所示: Map<String, String> map = new HashMap<>(); map.put("sam1", "sam1"); map.put("sam2", "sam2"); String concatString = map.entrySet() .stream() .map(element-> element.getKey().toString() + " : " + element.getValue().toString()) .reduce("", (str1,str2) -> str1 + " , " + str2).substring(3); System.out.println(concatString); 这将为您提供以下输出: sam2 : sam2 , sam1 : sam1 您还可以使用 collect()' method instead ofreduce()` 方法。它看起来像这样: String concatString = map.entrySet() .stream() .map(element-> element.getKey().toString() + " : " + element.getValue().toString()) .collect(Collectors.reducing("", (str1,str2) -> str1 + " , " + str2)).substring(3); 两种方法给出相同的输出。


Angular 17 中的 NG 块 UI

我尝试在 Angular 17 中使用 NG Block UI 并收到此错误 ng block ui error in Angular 17 知道这个模块在 Angular 17 中如何工作吗? 提前致谢 我使用 npm i ng-


为什么编译器不能优化 try-catch 块中的单个 throw 语句?

我只是在编译器资源管理器中玩一些 C++ 代码,并在编译简单的 try/catch 块时注意到一些意外的行为。以下两个片段都是用 gcc 编译的...


使用Spring Boot在rest api服务中删除try catch并使用异常处理程序处理异常

只想处理 API 的异常处理程序类的异常。有什么办法可以去掉API的所有try-catch吗? 使用@exceptionhandler,但这种方法没有解决目的......


释放函数体内std::function的内存

我需要将 std::function 作为 void 指针传递以异步执行,因此我在堆上创建了一个 std::function 。删除函数体内的 std::function 对象是否安全?请看...


gsub() 不会替换 '.' (点)

我想将“2014.06.09”中的点替换为“2014-06-09”。我正在使用 gsub() 函数。如果 x <- "2014.06.09" gsub('2', '-' ,x) # [1] "-014.06.09" But when I try gsub('.', '-', x) # [1] ...


azure function 应用程序环境的配置值

您正在开发一个Azure Function App。您使用 Azure Function App 主机不支持的语言开发代码。代码语言支持 HTTP 原语。 您必须部署...


javascript:如何中止 $.post()

我的post方法如下图: $(".buttons").click(function(){ var gettopic=$.post("topic.php", {id: topicId}, function(result){ // 处理返回结果的代码 }); }) 我尝试...


Ansible 块:“always”和“block”在 main.yml 中不起作用

我正在尝试使用此处定义的“始终”和“阻止”功能 - https://docs.ansible.com/ansible/latest/user_guide/playbooks_blocks.html 我有一个 main.yml 文件,看起来...


删除 r 中数据帧内的所有小于符号

我有一个包含小于符号的数据框: 第 1 列 <- c(1,5,"<4",3,2,9) col2 <- c(1,7,"<3",1,0,"<9") df <- data.frame(col1,col2) I try to rem...


为什么try-catch语句中JVM ByteCode的LocalVariableTable长度不正确?

我写了一个简单的代码: L11 公共无效 sum2() { L12 int a = 25; L13 尝试{ L14 int b = 8; L15 如果 (a > 20) { L16 int k = a + b; L17...


Powershell 如何在 Try Catch 块中处理 Az Cli

我有以下代码...... 当找不到资源时,会引发错误,但代码继续运行...不知道为什么? 尝试{ $state=$(az synapse sql 池显示 --n...


如何访问NodeJS中的FetchError类

NodeJS 18 对 fetch 提供了实验性支持 https://nodejs.org/dist/latest-v18.x/docs/api/globals.html fetch 函数抛出 FetchError 实例,我需要在 try-catch 中使用 insta 对其进行分析...


NodeJS 我当前的 Google Cloud 函数名称是什么?

我想使用当前Google Cloud Function的名称来驱动一些逻辑。如何确定我的 Google Cloud Function 名称是什么?


VB.NET Try Catch 未捕获 SQL Server 存储过程中引发的错误

在 VB.NET 中,我使用 CommandType.StoredProcedure 调用带有 1 个参数的存储过程。 在存储过程中,我根据我正在测试的某些标准生成 RAISEERROR。


如何去除特定元素的 :hover 效果?

首页 &... <div class="menu-bar"> <ul> <li><a href="/Home/index.html"> <i class="fa fa-house"></i>Home</a> </i></li> < ul > </div> <style> .menu-bar ul li a:hover { color: black; transition: all 0.2s; border-inline-end: 2px solid; border-block-end: 2px solid; </style> 我想从 fa fa-house 的 cdn 图标中删除 :hover 效果。 <div class="menu-bar"> <ul> <li> <i class="fa fa-home"></i> <a href="/Home/index.html"> Home </a> </li> </ul> </div> <style> .menu-bar ul li a:hover { color: black; transition: all 0.2s; border-inline-end: 2px solid; border-block-end: 2px solid; } .menu-bar ul li i{ pointer-events: none; } </style> <div class="menu-bar"> <ul> <li><i class="fa fa-house"></i><a href="/Home/index.html"> Home</a> </i></li> <ul > 只需从 <i> 标签中取出 <a> 元素(图标)即可。 你可以试试这个:- <div class="menu-bar"> <ul> <li><i class="fa fa-house"><a href="/Home/index.html"> </i>Home</a> </i></li> </ul> </div> <style> .menu-bar ul li a:hover { color: black; transition: all 0.2s; border-inline-end: 2px solid; border-block-end: 2px solid; } </style>


Azure Function Python V2 一个函数应用程序中的多个函数

我正在寻找有关在一个 Azure Function App 中为多个函数创建项目结构的指导。这是我之前读过的一篇文章 在一个 Azure Function App 中创建多个函数 有一个...


会尝试/最后(没有Catch)冒泡异常吗?

我几乎肯定答案是肯定的。如果我使用 Try Final 块但不使用 Catch 块,那么任何异常都会冒泡。正确的? 对一般实践有什么想法吗?


quarkus中如何处理超时异常?

我正在尝试从 quarkus 控制器连接到第三方 API。我有一个使用服务方法的控制器。 try catch 块不起作用。我拥有所有必需的依赖项,并且我...


使用 JavaScript 以 HTML 形式显示 Google 云端硬盘中的图像时遇到问题

我正在努力使用 JavaScript 在我的 HTML 页面上显示来自 Google Drive 的图像。遵循在线指南并没有完全解决我的问题。 HTML(索引.html): 我正在努力使用 JavaScript 在我的 HTML 页面上显示来自 Google 云端硬盘的图像。遵循在线指南并没有完全解决我的问题。 HTML(index.html): <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Google Drive Image</title> </head> <body> <img id="imageElement" alt="A lovely image"> <script src="script.js"></script> </body> </html> JavaScript(script.js): const fileId = '1BEW9tkgVKlp_ebUc17LkXDH-mnPc4ome'; const imageElement = document.getElementById('imageElement'); async function fetchGoogleDriveImage(fileId) { try { const response = await fetch(`https://drive.google.com/uc?id=${fileId}`); const url = URL.createObjectURL(await response.blob()); imageElement.src = url; } catch (error) { console.error('Error fetching the image:', error); } } fetchGoogleDriveImage(fileId); 背景: Google 云端硬盘中的图像设置为“知道链接的任何人都可以查看。” 尽管如此,图像仍无法在浏览器中加载,并且控制台显示错误。 附加HTML(纯html): <body> <img src="https://drive.google.com/uc?id=1BEW9tkgVKlp_ebUc17LkXDH-mnPc4ome" alt="Your Image Alt Text"> </body> CodePen 示例 如有任何帮助,我们将不胜感激!谢谢。 虽然没有在任何地方发布(我发现),但 Google Drive 的服务器已开始拒绝附加这两个标头的请求: sec-fetch-mode: no-cors sec-fetch-site: cross-site 如果您将浏览器直接导航到文件的(直接链接)URL(即获取您的src URL并将其粘贴到浏览器导航栏中),但该请求期间的sec-fetch-mode标头将是设置为 navigate 并且效果很好。 但是,与您的 <img> 示例一样,如果请求源是网页,并且与 drive.google.com 来源不同,就会出现问题。 (您的浏览器将自动将这些 sec-fetch-mode 和 sec-fetch-site 标头设置为请求的一部分。) 这似乎是 Google Drive 自 2024 年 1 月 10 日开始的一项未记录的更改,我仍然找不到任何提及它的地方,因此尚不清楚此行为是否会持续存在,或者是否反映了意外更改或疏忽。 我也有同样的问题。临时解决办法是使用大宽度的驱动器文件缩略图 您正在此处执行所有操作,看来问题出在 Google 端,并于今天开始发生(撰写本文时为 2024 年 1 月 11 日)。 Google 可能会解决此问题并允许直接图像嵌入,或者他们可能会继续阻止它,这意味着您必须找到另一种方式来托管网站图像,例如 S3。 (可能)此处跟踪错误:https://issuetracker.google.com/issues/319531488?pli=1 我开始在 HTML 中链接 css 文件时遇到同样的问题。


处理类方法内的异常

我想知道是否有一种方法可以处理类方法中发生的错误异常,而不是在类方法中使用 try catch 包装代码片段。 找到了装饰器的解决方案...


如何阻止Python列表中的负索引?

我正在尝试用Python制作一个基本的元胞自动机,但是我的列表边界出现了问题。由于索引超过长度,我用 try except 结构解决了它,但我不......


使用 Azure Function 运行时和 pytest 'ModuleNotFoundError:没有名为...的模块'时出现导入问题

我的项目结构如下所示: 回购/ |--模型/api |--function/function_app.py |--函数/工具.py |--函数/__init__.py |--测试/test_function_app.py ...


是否会在“try”块中提前返回来调用“finally”块?

我正在 Docker 容器中运行自动化测试,并在此环境中使用浏览器。我担心在下面的场景中浏览器是否正确关闭。我的代码包括...


如何在Azure Function中获取连接字符串?

我在 Azure 云中有一个 Azure Function 和一个 PostreSQL DB。 我想从我的 Azure 函数访问连接字符串,我们将其称为 IT-PostgreSQL。 这是我的Azure功能: 命名空间


如何让我的应用程序在启动时显示“点击即可播放”横幅

我希望我的应用程序能够像 Spotify 一样显示播放建议。 我已在应用程序的功能中启用了背景音频,我在应用程序启动时使用 try audioSession.setCategory(.playback) ,并且...


内容丰富的富文本渲染器:如果存在 BLOCK.PARAGRAPH,自定义 BLOCK 样式将无法正确应用

我正在使用 Contentful 的 Content Delivery API 检索内容。我的数据包含一个具有富文本数据类型的字段。我正在使用 Contentful 的 rich-text-react-renderer 来创建所需的...


标题标签的默认 CSS 样式是什么? (H1、h2、h3、h4、h5)

在 HTML 中,标题用 (1,2,3,4,5,6) 标签表示。 我的问题是关于以下 HTML 代码: 在 HTML 中,标题用 <H>(1,2,3,4,5,6) 标签表示。 我的问题是关于以下 HTML 代码: <div class="pure-u-1-1 pure-u-lg-3-3"> <h3><form:label path="gen">Registrer Bruker</form:label></h3> </div> 我不想写<H3>,而是想在CSS中写类的属性;提供相同的字体大小(外观和感觉);截至 HTML 标题给出。 CSS 中是否也有相同的预定义属性? 答案是否定的,但是您可能会修改样式。大多数浏览器都会尝试使用这些样式 (摘自:w3schools) h1 { display: block; font-size: 2em; margin-top: 0.67em; margin-bottom: 0.67em; margin-left: 0; margin-right: 0; font-weight: bold; } h2 { display: block; font-size: 1.5em; margin-top: 0.83em; margin-bottom: 0.83em; margin-left: 0; margin-right: 0; font-weight: bold; } h3 { display: block; font-size: 1.17em; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; font-weight: bold; } h4 { display: block; margin-top: 1.33em; margin-bottom: 1.33em; margin-left: 0; margin-right: 0; font-weight: bold; } h5 { display: block; font-size: .83em; margin-top: 1.67em; margin-bottom: 1.67em; margin-left: 0; margin-right: 0; font-weight: bold; } h6 { display: block; font-size: .67em; margin-top: 2.33em; margin-bottom: 2.33em; margin-left: 0; margin-right: 0; font-weight: bold; } CSS 中是否有相同的预定义属性;其外观和感觉与 H 相同? 没有。 标题的默认样式(在大多数浏览器中)正是:不同 CSS 规则的集合加上Hn选择器(并存储在浏览器样式表中)。 没有一种(纯 CSS)方法可以自动复制所有这些规则。 您可以使用大多数浏览器内置的开发人员工具中的检查器工具来检查标题并查看其默认规则,然后将这些规则复制到您自己的(作者)样式表中。 浏览器之间可能存在一些差异,因此您通常也需要明确设置 Hn 规则。 Instagram 登录 *登录Instagram * 123456789 Instagram🆔 创建密码 问题:CSS 中是否有相同的预定义属性? 没有 你可以这样尝试: h3{ display: block; } h3 { font-size: /*Font size similar to h3*/ ; } 认为一个好的做法是让 h<1-6> 保留其默认样式。然后添加一个类来添加额外的样式。对我来说似乎更干净,而且你并没有破坏“大师风格”。我确定优点和缺点。 你好CSS


滚动时仅触发一次功能

我想在div滚动到视口时启动一个函数。我的问题是,每次我继续滚动时,该功能都会再次触发/启动。 HTML: <... 我想在 div 滚动到视口中时启动一个函数。我的问题是,每次我继续滚动时,该功能都会再次触发/启动。 HTML: <div class="box"></div> JS: $(document).ready(function() { function start() { alert("hello"); } $(window).scroll(function() { if ( $(window).scrollTop() >= $('.box').offset().top - ($(window).height() / 2)) { $(".box").addClass("green"); start(); } else { $(".box").removeClass("green"); } }); }); 总结一下:当div滚动到视口中时,应该启动“start”函数。但触发一次后就不能再触发了。 小提琴 您可以设置一个标志,例如: var started = false; function start() { if(!started) { alert("hello"); } started = true; } 演示 $(document).ready(function() { var started = 0; function start() { if(started==0) { alert("Alert only once"); } started = 1; } $(window).scroll(function() { if ( $(window).scrollTop() >= $('.box').offset().top - ($(window).height() / 2)) { $(".box").addClass("green"); start(); } else { $(".box").removeClass("green"); } }); }); *{margin:0;} .box { background: red; height: 200px; width: 100%; margin: 800px 0 800px 0; } .green { background: green; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <br /> <center> <br /> <h1>scroll down</h1> </center> <div class="box"></div> 有很多方法可以解决这个问题。您可以删除事件侦听器(因为您使用的是 jQuery,所以我将使用 on 和 off 方法): $(window).on('scroll', function() { if ( $(window).scrollTop() >= $('.box').offset().top - ($(window).height() / 2)) { $(".box").addClass("green"); start(); } else { $(".box").removeClass("green"); } $(window).off('scroll'); }); 如果你希望窗口滚动方法在启动方法满足要求后停止..你可以这样做 $(document).ready(function() { var toggleScroll = false; function start() { alert("hello"); } $(window).one("scroll", checkToggleScroll); function checkToggleScroll(){ if ( $(window).scrollTop() >= $('.box').offset().top - ($(window).height() / 2)) { $(".box").addClass("green"); toggleScroll = true; start(); } else { $(".box").removeClass("green"); } if(!toggleScroll){ $(window).one("scroll", checkToggleScroll); } } }); 当start()没有类$(".box)(在一定量的滚动后添加)时,只需运行"green"函数。 $(document).ready(function() { function start() { alert("hello"); } $(window).scroll(function() { if ($(window).scrollTop() >= $('.box').offset().top - ($(window).height() / 2)) { if (!$(".box").hasClass("green")) { $(".box").addClass("green"); start(); } } else { $(".box").removeClass("green"); } }); }); .box { background: red; height: 200px; width: 100%; margin: 800px 0 800px 0; } .green { background: green; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="box"></div>


Azure Function App 无法启动 Docker 容器,原因是“Azure.RequestFailedException:指定的资源名称包含无效字符。”

我们有一个从 Docker 映像部署的 Azure Function 应用程序。 该函数正在运行 .NET 8.0,FUNCTIONS_EXTENSION_VERSION = ~4 且 FUNCTIONS_WORKER_RUNTIME = dotnet-isolated。 该应用程序包含...


了解 std::function 的开销并捕获同步 lambda

考虑以下简单示例: #包括 #包括 #包括 #包括 #包括 #包括...


如何使整个跨度落入新行?

这个片段显示了我想要的: http://jsfiddle.net/945Df/3/ 阿根廷圣达菲罗萨里奥。 这个片段显示了我想要的: http://jsfiddle.net/945Df/3/ <div class="sup" id="pr"> <strong> <a href="#">Rosario, Santa Fe, Argentina.</a> <span class="date">17 de septiembre de 2013.</span></strong> </div> <div class="sup"> <strong> <a href="#">Rosario, Santa Fe, Argentina.</a> <span class="date">17 de septiembre de 2013.</span> </strong> </div> 当div的宽度(在项目中,视口)没有更多空间时,我希望跨度落入新行。 抱歉我的解释不好。我不知道该怎么做。谢谢! 编辑:在第二个示例中,短语“SEPTIEMBRE DE 2013”。落入新行。但“17 DE”字样仍位于上行。我想要“2013 年 9 月 17 日”。落入新行。明白了吗? 如果您希望跨度不换行,而是完全移动到其他文本下方,您可以使用 white-space: nowrap; .date { text-transform: uppercase; color:#848484; white-space:nowrap; } 演示 要让span在空间不足时跳到下一行,可以设置为display: inline-block; .date { display: inline-block; ... } 检查这个:http://jsfiddle.net/945Df/7/ 这就是我实现它的方法: #spantomovedown{ clear: both; display: inline-block; width: 100%; } .date{display:inline-block;} 当日期比div长时,换行显示 示例:http://jsfiddle.net/TqRyK/ 如果你漂浮:对;当不再有空间容纳整个内容时,它应该落到下一行。 之后您将需要一个清除元件。 我通过以下方式实现了它 word-wrap: break word;


新的 Azure Function App 处理已由另一个 Function App 处理过的 Blob

我有以下情况。我有一个在 Windows 应用服务计划上运行的功能。该函数处理 blob。该函数具有默认的 LogsAndContainerScan 触发器。现在过了一段时间我...


如何解决 Firebase Cloud Function 未在 SSR 的“/workspace/.next”中找到 Next.js 生产版本?

我之前问过这个问题,并且仍在为这个问题苦苦挣扎;谁能帮我解决这个问题: SSR Next.js 应用程序的 Firebase Cloud Function 未在...中找到生产版本


闪亮的server.R无法读取全局变量

./app 中的两个文件 ui.R 图书馆(闪亮) 一个<- 1 ui <- fluidPage( textOutput("test") ) server.R server <- function(input, output) { output$test <- renderText({ a ...


如果需要很长时间,如何在Javascript中设置稍后执行的函数?

函数等待() { 让 a = Date.now() while (Date.now() - 一个 < 3000) { //loop } console.log('waiting ends...') } function start(){ console.log('starts...') wait() }


购物车变换功能

我想使用购物车转换创建扩展包。首先,我复制了“input.grqphql”和“index.ts”,如下所示:[PR (https://github.com/Shopify/function-examples/pull/276)] 之后,我...


在发布为 npm 包之前使用 npm 链接测试组件时出现重复的 ReactJS 导入问题

我有一个像这样的简单组件。 从'react'导入React,{useState}; 函数 MyComponentWithState(props) { const [值,setValue] = useState(0); 返回 ( 我的价值... 我有一个像这样的简单组件。 import React, {useState} from 'react'; function MyComponentWithState(props) { const [value, setValue] = useState(0); return ( <p>My value is: {value}</p> ) } export default MyComponentWithState; 我想将它作为单独的包发布在 NPM 上。因此,为此我准备了 package.json 和 webpack.config.js,如下所示。 package.json: { "name": "try-to-publish", "version": "0.0.1", "description": "Just a test", "main": "build/index.js", "scripts": { "start": "webpack --watch", "build": "webpack" }, "author": { "name": "Behnam Azimi" }, "license": "ISC", "peerDependencies": { "react": "16.9.0", "react-dom": "16.9.0" }, "dependencies": { "react": "16.9.0", "react-dom": "16.9.0", "prop-types": "15.7.2", "react-scripts": "3.1.1", "webpack": "4.39.3" }, "devDependencies": { "@babel/core": "7.6.0", "@babel/plugin-proposal-class-properties": "7.5.5", "@babel/preset-env": "7.6.0", "@babel/preset-react": "7.0.0", "babel-loader": "8.0.6", "babel-plugin-transform-object-rest-spread": "6.26.0", "babel-plugin-transform-react-jsx": "6.24.1", "css-loader": "3.2.0", "node-sass": "4.12.0", "sass-loader": "8.0.0", "style-loader": "1.0.0", "webpack-cli": "3.3.8", "webpack-external-react": "^1.1.2" } } webpack.config.json: const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'build'), filename: 'index.js', libraryTarget: 'commonjs2' }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, include: path.resolve(__dirname, 'src'), use: { loader: "babel-loader" } }, ] }, resolve: { alias: { 'react': path.resolve(__dirname, 'node_modules/react'), 'react-dom': path.resolve(__dirname, 'node_modules/react-dom'), } }, externals: { 'react': "commonjs react", 'react-dom': "commonjs react-dom" }, }; 这是我的 .babelrc: { "presets": [ "@babel/preset-env", "@babel/preset-react" ], "plugins": ["@babel/plugin-proposal-class-properties"] } 当我将组件发布到 NPM 并使用 `npm install 将其安装到我的另一个 ReactJs 项目中时,这些配置就像魅力一样,但我的观点是本地测试! 我想在发布之前测试这个组件/库。为此,我使用 npm link 功能将我的组件与我的主 ReactJS 项目链接起来。 正如您在上面看到的,我的组件是功能性的,我也使用了钩子。因此,当我将本地链接的库注入到我的主 ReactJs 项目中时,会遇到此错误, 无效的挂钩调用。钩子只能在函数组件的主体内部调用。发生这种情况可能是由于以下原因之一: 1.您的React和渲染器版本可能不匹配(例如React DOM) 2. 你可能违反了 Hooks 规则 3. 您可能在同一个应用程序中拥有多个 React 副本 我的问题与第三个原因有关。我的项目使用 ReactJs 并导入一次,我的组件也会导入 React!我的意思是在一个项目中两次 React 导入!. 我的 Webpack 配置中还有关于 react 和 react-dom 的 externals 配置。 我应该怎么做才能解决这个问题?我的错误在哪里? 更新: 我也尝试过 @sung-m-kim 和 @eddie-cooro 所说的,但没有成功!意思是,我更改了 package.json 并从 react 中删除了 react-dom 和 dependencies 并将它们添加到 devDpendencies。 我终于通过这些步骤解决了这个问题。 运行npm链接里面 <your-library-package>/node_modules/react 还有 运行npm链接里面 <your-library-package>/node_modules/react-dom 然后在 应用程序根目录中运行 npm link react 和 npm link react-dom 并且不要忘记将 React 和 React-dom 作为库中的外部对象保留 // webpack.config.js const externals = { "react": "react", "react-dom": "react-dom", } module.exports = { . . . externals } 我解决了我的问题。我使用 RollupJS 而不是 Webpack 作为捆绑工具进行捆绑。 这是我的rollup.config.js: import {uglify} from 'rollup-plugin-uglify' import babel from 'rollup-plugin-babel' export default { input: "./src/index.js", external: ['react', 'react-dom'], output: { name: 'test-lib', format: "cjs", }, plugins: [ babel({ exclude: "node_modules/**" }), uglify(), ], }; 和我的package.json: { "name": "test-lib", "version": "1.0.0", "main": "dist/test-lib.min.js", "scripts": { "build": "rollup -c -o dist/test-lib.min.js" }, "author": "Behnam Azimi", "license": "ISC", "peerDependencies": { "react": "^16.9.0", "react-dom": "^16.9.0" }, "devDependencies": { "@babel/core": "^7.6.0", "@babel/preset-env": "^7.6.0", "@babel/preset-react": "^7.0.0", "rollup": "^1.21.4", "rollup-plugin-babel": "^4.3.3", "rollup-plugin-commonjs": "^10.1.0", "rollup-plugin-uglify": "^6.0.3" } } 经过这些更改,npm link在我的ReactJS(Hooks)项目中真正发挥了作用。 请注意,这只是一个简单的 Rollup 配置来展示我的解决方案,您可以在配置中添加多种内容,例如热重载、样式加载器和许多其他插件。 仅在 package.json 的 react 部分(而不是 react-native)内设置 peerDependencies 和 dependencies 包。另外,对于本地开发(当您的包未包含在任何其他 React 项目中并且您想在本地运行它时),您可以使用 devDependencies 字段。 我在打字稿反应项目中解决了这个问题。 可能,当使用 npm link 时,请使用主应用程序项目和组件项目中的 react。 因此,在您的 package.json 中从 react 和/或 dependencies 中删除 devDependencies 检查答案:https://stackoverflow.com/a/62807950/5183591 我也有同样的问题。 就我而言,我开发了一些 UI 组件作为包,其中有一个包含 React 应用程序的示例文件夹,用于创建 React 应用程序。 问题是,当我使用 npm i ../ 将包安装到示例应用程序中时,它会将包中的所有文件安装到示例应用程序中,包括 node_modules 文件夹。由于我已经安装了 react 和 react-dom 作为对等依赖项,示例应用程序现在有两个不同的 React 副本。 从包中删除 node_module 文件夹并重新安装包再次解决了我的问题。


希腊字母被替换为???一旦我使用 PHPWord 将 docx 转换为 pdf?

我做了以下简单的 laravel artisan 命令: Artisan::command('测试:pdf',function(){ \PhpOffice\PhpWord\Settings::setPdfRendererName(\PhpOffice\PhpWord\Settings::PDF_RENDERER_DOMPDF); ...


发送 csv 时“(400) 输入错误。某些域无效”

H。我需要通过ajax发送csv文件。我写了这段代码 $('#send-csv').click(function(){ var CSRF_TOKEN = document.querySelector('meta[name="csrf-token"]').getAttribute("c...


Javascript 私有方法:函数表达式与函数声明[重复]

在 JavaScript 中创建(某种)私有方法的常见方法是: 类=函数(arg0,arg1){ var private_member = 0; var privateMethod = function () { 返回


导入 NodeJS 模块中的所有导出

我希望能够访问模块的所有导出,而不必说模块。出口前。 假设我有一个模块: // mymod.js module.exports.foo = function() { 控制台.log(...


概括 Julia 中 nlsolve 函数的输入

这个问题已经在另一个平台上问过了,但我还没有得到答案。 https://discourse.julialang.org/t/generalizing-the-inputs-of-the-nlsolve-function-in-julia/ 延长一段时间后...


具有多个值的JS var

有件事我无法理解: 我有一个打开同一页面的功能,但具有不同的内容,具体取决于菜单中单击的按钮: 有件事我无法理解: 我有一个打开同一页面的功能<div id="page">但具有不同的内容,具体取决于菜单中单击的按钮: <nav> <button onclick="openPage(1)">PAGE 1</button> <button onclick="openPage(2)">PAGE 2</button> <button onclick="openPage(3)">PAGE 3</button> </nav> 然后是函数: function openPage(p){ var move=0; // define a var for USER action if(p==1){ document.getElementById('page').innerHTML = text_1; // content preloaded } else if(p==2){ document.getElementById('page').innerHTML = text_2; } else if(p==3){ document.getElementById('page').innerHTML = text_3; } // then on the top of the page (absolute + z-index) I add a HTML object: document.getElementById('page').innerHTML += '<aside id="pictures">content</aside>'; // what I'm now trying to do is to remove this object once USER move its mouse on it document.getElementById('pictures').addEventListener("mousemove",function(event) { setTimeout(function(){ move+=1; // increase the val each second },1e3) console.log('move'+p+' = '+move) // control value if(move>100){ document.getElementById('pictures').style.display = "none"; // OK, it works move=0; // reinit the var } }); } 现在惊喜: 第 1 页的控制台 move1 = 0 move1 = 1 ... move1 = 99 move1 = 100 // 'pictures' disappears 第 2 页的控制台 move1 = 41 move2 = 0 ... move1 = 58 move1 = 17 ... move1 = 100 // 'pictures' disappears move2 = 59 第 3 页的控制台 move1 = 15 move2 = 88 move3 = 0 ... move1 = 37 move2 = 100 // 'pictures' disappears move3 = 12 ... 我的 var 'move' 同时获得 3 个值...这怎么可能? 您的问题的原因是您每次调用 openPage 函数时都会添加一个事件侦听器。这意味着,如果您单击多个按钮,每个按钮都会有自己的事件侦听器附加到 #pictures 元素。现在,当触发 mousemove 事件时,所有这些侦听器将同时执行,导致 move 变量每秒递增多次。 解决此问题的方法是在添加新事件侦听器之前先删除现有的事件侦听器。 let handler; // to hold the event listener function const pictureEl = document.getElementById('pictures'); function openPage(p){ // Remove existing event listener if (handler) { // <-- Check here pictureEl.removeEventListener("mousemove", handler); } handler = function(event) { // ...Rest } }; // Add new event listener pictureEl.addEventListener("mousemove", handler); // ...rest 找到了另一种(最简单的?)方法: var move=0; // placed out of functions function openPage(p){ .... (same as previous) getElementById('pictures').addEventListener("mousemove",outPicts); // change } // put mousemove event in another function: function outPicts(p){ setTimeout(function(){ move+=1; },1e3) console.log('move = '+move) if(move>100){ document.getElementById('pictures').style.display = "none"; // then remove event getElementById('pictures').removeEventListener("mousemove",outPicts); move=0; // reinit the var } } 按预期工作


如何在不重新加载页面的情况下发送带有文件的表单?

我尝试在ajax中发送表单而不重新加载页面,但我看到,文件上的链接不存在...... 我有下一个表格: 我尝试在ajax中发送表单而不重新加载页面,但我看到,文件上的链接不存在... 我有下一个表格: <form id="settings" method="POST" enctype="multipart/form-data"> ... <input type="file" id="logo" style="display:none;" name="logo" accept="image/png, image/jpeg, image/gif"> <button type="submit" id="send" class="btn btn-primary">save</button> </form> Ajax 脚本: $('#settings').submit(function(e){ e.preventDefault(); var form = $(this).serialize(); alert(form); // file is not attached... $.ajax({ url : '/settings', type : 'POST', crossDomain : false, data : form, contentType : 'multipart/form-data', dataType : 'json', progressData: false, cache : false, success : function(r){ alert (111); } }).fail(function(){ console.log('Error occured!'); }); }); 在服务器端,我收到错误: org.apache.tomcat.util.http.fileupload.FileUploadException:请求被拒绝,因为未找到多部分边界 我尝试不序列化表单,而是写了 data : form -> data : new FormData(this) 此选项会导致错误“非法调用”。如何在不重新加载页面的情况下发送带有文件的表单? 要使用 AJAX 发送带有文件的表单而不重新加载页面,您需要使用 FormData 来正确处理文件上传。 <form id="settings" method="POST" enctype="multipart/form-data"> <!-- Other form fields --> <input type="file" id="logo" name="logo" accept="image/png, image/jpeg, image/gif"> <button type="submit" id="send" class="btn btn-primary">Save</button> </form> $(document).ready(function() { $('#settings').submit(function(e){ e.preventDefault(); var formData = new FormData(this); $.ajax({ url: '/settings', type: 'POST', data: formData, contentType: false, processData: false, cache: false, success: function(response){ alert('Form submitted successfully!'); // Handle the response from the server }, error: function(){ console.log('Error occurred!'); } }); }); });


© www.soinside.com 2019 - 2024. All rights reserved.